-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdb.json
More file actions
1 lines (1 loc) · 427 KB
/
db.json
File metadata and controls
1 lines (1 loc) · 427 KB
1
{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"themes/3-hexo/source/img/alipay.jpg","path":"img/alipay.jpg","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/img/article-list-background.jpeg","path":"img/article-list-background.jpeg","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/img/school-book.png","path":"img/school-book.png","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/gitalk.css","path":"css/gitalk.css","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/img/brown-papersq.png","path":"img/brown-papersq.png","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/style.styl","path":"css/style.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/mobile.styl","path":"css/mobile.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/js/iconfont.js","path":"js/iconfont.js","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/js/jquery.autocomplete.min.js","path":"js/jquery.autocomplete.min.js","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/js/jquery.pjax.js","path":"js/jquery.pjax.js","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/js/script.js","path":"js/script.js","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/img/weixin.jpg","path":"img/weixin.jpg","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/js/search.js","path":"js/search.js","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/icomoon.eot","path":"css/fonts/icomoon.eot","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/icomoon.woff","path":"css/fonts/icomoon.woff","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/icomoon.ttf","path":"css/fonts/icomoon.ttf","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/iconfont.eot","path":"css/fonts/iconfont.eot","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/icomoon.svg","path":"css/fonts/icomoon.svg","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/iconfont.ttf","path":"css/fonts/iconfont.ttf","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/iconfont.woff","path":"css/fonts/iconfont.woff","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/iconfont.svg","path":"css/fonts/iconfont.svg","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/atom-light.styl","path":"css/hl_theme/atom-light.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/brown-paper.styl","path":"css/hl_theme/brown-paper.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/atom-dark.styl","path":"css/hl_theme/atom-dark.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/fonts/selection.json","path":"css/fonts/selection.json","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/github-gist.styl","path":"css/hl_theme/github-gist.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/darcula.styl","path":"css/hl_theme/darcula.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/gruvbox-dark.styl","path":"css/hl_theme/gruvbox-dark.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/github.styl","path":"css/hl_theme/github.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/gruvbox-light.styl","path":"css/hl_theme/gruvbox-light.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/kimbie-dark.styl","path":"css/hl_theme/kimbie-dark.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/kimbie-light.styl","path":"css/hl_theme/kimbie-light.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/railscasts.styl","path":"css/hl_theme/railscasts.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/rainbow.styl","path":"css/hl_theme/rainbow.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/school-book.styl","path":"css/hl_theme/school-book.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/sublime.styl","path":"css/hl_theme/sublime.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/sunburst.styl","path":"css/hl_theme/sunburst.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/img/avatar.jpg","path":"img/avatar.jpg","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/css/hl_theme/zenbum.styl","path":"css/hl_theme/zenbum.styl","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/js/gitment.js","path":"js/gitment.js","modified":0,"renderable":1},{"_id":"themes/3-hexo/source/js/gitalk.js","path":"js/gitalk.js","modified":0,"renderable":1}],"Cache":[{"_id":"themes/3-hexo/.gitignore","hash":"560a43fddfe4559ed1a17e7362874454519f189b","modified":1570265983607},{"_id":"themes/3-hexo/_config.yml","hash":"3814a1abcd27db73e9876370217308d85ef419f1","modified":1572775865234},{"_id":"themes/3-hexo/README.md","hash":"754d6f873d73f4a7faf5530fa4062e9a696a8fd4","modified":1570265983608},{"_id":"source/_posts/MarkDown-typora.md","hash":"436c82ed262e822ef289ce6249609977285e440d","modified":1571516262883},{"_id":"source/_posts/linux+nginx+hexo.md","hash":"b9ed289d7b53cc992a8247d048bde7fa272a07f4","modified":1572775872454},{"_id":"themes/3-hexo/.DS_Store","hash":"0770f9d42bfdd8d420de48fed463015e001cf579","modified":1570265983606},{"_id":"themes/3-hexo/source/.DS_Store","hash":"fdcc907c46e093a14b153c5dc8c038461997ed3c","modified":1570265983628},{"_id":"themes/3-hexo/layout/indexs.md","hash":"9c145e4326337afc9755cac772c5a30b525649a3","modified":1572775870351},{"_id":"themes/3-hexo/layout/post.ejs","hash":"aeda285031ba8d4e94225e82b364bcf5f79fce1d","modified":1570265983626},{"_id":"themes/3-hexo/layout/index.ejs","hash":"a5c464897e7dc9d45d03d8b61e742b1ac4173a95","modified":1570265983625},{"_id":"themes/3-hexo/layout/_partial/comment.ejs","hash":"d18f94e04ef0cf7abb432a8e707ccb3abc7fe435","modified":1570265983612},{"_id":"themes/3-hexo/layout/_partial/copyright.ejs","hash":"faffe25aec33936fa2ec9d8f0e34e16ef3d90c25","modified":1570265983617},{"_id":"themes/3-hexo/layout/_partial/dashang.ejs","hash":"6eab1e5fae6bd60928325d026a1bed61c43d11a9","modified":1570536701185},{"_id":"themes/3-hexo/layout/_partial/article_copyright.ejs","hash":"05d3cddf5f3a53577452db4efa811bd361f7c0c4","modified":1570265983611},{"_id":"themes/3-hexo/layout/_partial/article.ejs","hash":"d3c928954057bcebdf3fc294b2123885b08396d3","modified":1570265983610},{"_id":"themes/3-hexo/layout/_partial/full-toc.ejs","hash":"0e976208d79b0396eb51ca1af5016c963c6e4618","modified":1570265983619},{"_id":"themes/3-hexo/layout/_partial/friends.ejs","hash":"558a3d4bad578819fb07729fe1b50d9b81da8b93","modified":1570265983619},{"_id":"themes/3-hexo/layout/_partial/mathjax.ejs","hash":"e2be0e37f3d48e63e65a47d819bfb800b9aa3784","modified":1570265983621},{"_id":"themes/3-hexo/layout/_partial/header.ejs","hash":"915d5f10dd8f3dcd19cb75010e23689e8f385caf","modified":1570265983620},{"_id":"themes/3-hexo/layout/_partial/nav-right.ejs","hash":"98326675546fc6828a45e8b95250899b4ee2d821","modified":1570265983623},{"_id":"themes/3-hexo/layout/_partial/tag.ejs","hash":"87e932476754f27424f9ec397ed66a4ab8a59ad8","modified":1570265983624},{"_id":"themes/3-hexo/layout/_partial/meta.ejs","hash":"ef387e80043b62e1925a068267f2377cac64adc7","modified":1570265983621},{"_id":"themes/3-hexo/layout/_partial/toc-ref.ejs","hash":"33f7a4bfca1bb9835ec8f0d1e73188d1f56cc8b9","modified":1570265983625},{"_id":"themes/3-hexo/source/img/alipay.jpg","hash":"e457d1d3dfefbbd824d154cf756a2c6d10b812a2","modified":1570265983662},{"_id":"themes/3-hexo/source/img/article-list-background.jpeg","hash":"4fdf8b3e53dd02d6ee6360aebfadb0cba1fb5633","modified":1570265983664},{"_id":"themes/3-hexo/layout/_partial/footer.ejs","hash":"ef8ace4b309d42114f1e56ed0cb7037f1da63006","modified":1570538557618},{"_id":"themes/3-hexo/source/img/school-book.png","hash":"711ec983c874e093bb89eb77afcbdf6741fa61ee","modified":1570265983666},{"_id":"themes/3-hexo/layout/_partial/nav-left.ejs","hash":"c14bc1393f779dff7854089621804dceea236d82","modified":1570265983622},{"_id":"themes/3-hexo/source/css/gitalk.css","hash":"3dc58e9a3fd63a3144d5fe850eb55e3dc885c9fb","modified":1570265983647},{"_id":"themes/3-hexo/source/img/brown-papersq.png","hash":"3a1332ede3a75a3d24f60b6ed69035b72da5e182","modified":1570265983665},{"_id":"themes/3-hexo/source/css/style.styl","hash":"322abe325d5fe9ff37347bdd19e772315a8ebfed","modified":1570265983660},{"_id":"themes/3-hexo/source/css/mobile.styl","hash":"d10bdd736aa343f38fe15cba4c81d45d3d259de4","modified":1570265983659},{"_id":"themes/3-hexo/source/js/iconfont.js","hash":"3a0869ca1b09af07d82987e343a3bc4cb9558ecb","modified":1570265983674},{"_id":"themes/3-hexo/source/js/jquery.autocomplete.min.js","hash":"2462169ad7f4a8ae9f9f4063995cbe7fed45cd77","modified":1570265983674},{"_id":"themes/3-hexo/source/js/jquery.pjax.js","hash":"8c2a4f10a4da3d9615a3a81542494c6d21479b3d","modified":1570265983675},{"_id":"themes/3-hexo/source/js/script.js","hash":"14772b08b9c3d5c99a4b54748be9666deaae2778","modified":1570265983676},{"_id":"themes/3-hexo/source/img/weixin.jpg","hash":"8dafb22561698d0758fba9ea2a45abf6ad3512a2","modified":1570265983668},{"_id":"themes/3-hexo/source/js/search.js","hash":"788c610149a5f9361295f9f0207c8523f37ddb8b","modified":1570265983677},{"_id":"themes/3-hexo/layout/_partial/comments/disqus.ejs","hash":"32ce7b48d366b9c888ff2ceb911a3cd82f864537","modified":1570265983613},{"_id":"themes/3-hexo/layout/_partial/comments/gentie.ejs","hash":"908d9046502612d24780ca354bd9392a009b4d7b","modified":1570265983614},{"_id":"themes/3-hexo/layout/_partial/comments/click2show.ejs","hash":"8a3a175c2da956366ce91bfc4f4012a487f4bdfc","modified":1570265983612},{"_id":"themes/3-hexo/layout/_partial/comments/gitalk.ejs","hash":"01567e010cf4f2dd141fe2019490d3f0d5aa2529","modified":1570265983614},{"_id":"themes/3-hexo/layout/_partial/comments/gitment.ejs","hash":"eaf2b6f297282606b630ad55fb9e38af7e2829dc","modified":1570265983615},{"_id":"themes/3-hexo/source/css/_partial/autocomplete.styl","hash":"1ffe51e3b77afefcd94d386a718506d5b055ad94","modified":1570265983630},{"_id":"themes/3-hexo/source/css/_partial/dashang.styl","hash":"f0eac1dc1f5dbed1769d032bb5fd5f002faaee26","modified":1570265983632},{"_id":"themes/3-hexo/source/css/_partial/comment.styl","hash":"fe00fb1269b4fe1f3d5ab917891926222ce47275","modified":1570265983631},{"_id":"themes/3-hexo/source/css/_partial/fade.styl","hash":"02c7510a26f306e240f23ddbf772a69be2c890dd","modified":1570265983633},{"_id":"themes/3-hexo/source/css/_partial/font.styl","hash":"c200f3fabcfe83f3e45746e186b4bb111e73ad47","modified":1570265983634},{"_id":"themes/3-hexo/source/css/_partial/full-toc.styl","hash":"4102753dad0cc1ee9ed673f7253ba097a960c3b7","modified":1570265983635},{"_id":"themes/3-hexo/source/css/_partial/nav-left.styl","hash":"bf29eab9ea75fa191d678b6eefec440505ddf6e3","modified":1570265983635},{"_id":"themes/3-hexo/source/css/_partial/nav-right.styl","hash":"1d01247f974b059d9ef6a2178a724b4f72acd659","modified":1570265983636},{"_id":"themes/3-hexo/source/css/_partial/nprogress.styl","hash":"2620a02169a6aeb75137fd368eac2c36423d8498","modified":1570265983637},{"_id":"themes/3-hexo/source/css/_partial/num-load.styl","hash":"f7ef35459ece22e1da950b86126be1c2bfe97fcf","modified":1570265983638},{"_id":"themes/3-hexo/source/css/_partial/post.styl","hash":"8a462cf9b0b026e71eda9e704c0fbb952b4615c5","modified":1570265983638},{"_id":"themes/3-hexo/source/css/fonts/icomoon.eot","hash":"b6195bedc1cb2f9cfcb26cc27021f2e94be2ab0a","modified":1570265983640},{"_id":"themes/3-hexo/source/css/fonts/icomoon.woff","hash":"3985d29416bb9b19f50a2f20f2bbbce47f10af8d","modified":1570265983642},{"_id":"themes/3-hexo/source/css/fonts/icomoon.ttf","hash":"eb976d8b8559fcddfc2658a03a4350cb566fc06b","modified":1570265983641},{"_id":"themes/3-hexo/source/css/fonts/iconfont.eot","hash":"3dfe8e557d9dfaf39bca088a02b76deb82dbaa3d","modified":1570265983642},{"_id":"themes/3-hexo/source/css/fonts/icomoon.svg","hash":"b5e7562c8494b0ddb3a70ecc5545ef7340d8e971","modified":1570265983640},{"_id":"themes/3-hexo/source/css/fonts/iconfont.ttf","hash":"aa087561480fb9c2cfd541e33d1e99d5ac1a56bb","modified":1570265983645},{"_id":"themes/3-hexo/source/css/fonts/iconfont.woff","hash":"f8ed131ccf13f4bdd3ec11fc3e997339dd7b66ba","modified":1570265983646},{"_id":"themes/3-hexo/source/css/fonts/iconfont.svg","hash":"7e54ae44c02faa319c4fe128e1e6bda38eae5c9d","modified":1570265983644},{"_id":"themes/3-hexo/source/css/hl_theme/atom-light.styl","hash":"69d184a682bcaeba2b180b437dc4431bc3be38aa","modified":1570265983649},{"_id":"themes/3-hexo/source/css/hl_theme/brown-paper.styl","hash":"03af387edcc1cf8c18d12e9c440fd51b6cf425b6","modified":1570265983650},{"_id":"themes/3-hexo/source/css/hl_theme/atom-dark.styl","hash":"f3eb4e5feda9cbd6242ccf44ca064e2979b5d719","modified":1570265983648},{"_id":"themes/3-hexo/source/css/fonts/selection.json","hash":"b6456a4eabcffd95e822d1d7adce96da524d481a","modified":1570265983646},{"_id":"themes/3-hexo/source/css/hl_theme/github-gist.styl","hash":"5e05b19832c1099bd9d284bc3ed00dc8a3d7ee23","modified":1570265983651},{"_id":"themes/3-hexo/source/css/hl_theme/darcula.styl","hash":"2bfc14f27ccca108b4b3755782de8366e8bd001e","modified":1570265983650},{"_id":"themes/3-hexo/source/css/hl_theme/gruvbox-dark.styl","hash":"315ad610d303caba9eac80a7d51002193a15478a","modified":1570265983652},{"_id":"themes/3-hexo/source/css/hl_theme/github.styl","hash":"53276ff1f224f691dfe811e82c0af7f4476abf5d","modified":1570265983652},{"_id":"themes/3-hexo/source/css/hl_theme/gruvbox-light.styl","hash":"1bece084b1dbbbd4af064f05feffd8c332b96a48","modified":1570265983653},{"_id":"themes/3-hexo/source/css/hl_theme/kimbie-dark.styl","hash":"e9c190f9ffc37a13cac430512e4e0c760205be4a","modified":1570265983653},{"_id":"themes/3-hexo/source/css/hl_theme/kimbie-light.styl","hash":"0c3ccd0d64e7504c7061d246dc32737f502f64e4","modified":1570265983654},{"_id":"themes/3-hexo/source/css/hl_theme/railscasts.styl","hash":"a6e8cfd2202afd7893f5268f3437421e35066e7b","modified":1570265983655},{"_id":"themes/3-hexo/source/css/hl_theme/rainbow.styl","hash":"e5c37646a9d9c1094f9aab7a7c65a4b242e8db00","modified":1570265983655},{"_id":"themes/3-hexo/source/css/hl_theme/school-book.styl","hash":"51659351b391a2be5c68728bb51b7ad467c5e0db","modified":1570265983656},{"_id":"themes/3-hexo/source/css/hl_theme/sublime.styl","hash":"501d75ef0f4385bea24d9b9b4cc434ba68d4be27","modified":1570265983657},{"_id":"themes/3-hexo/source/css/hl_theme/sunburst.styl","hash":"2aa9817e68fb2ed216781ea04b733039ebe18214","modified":1570265983657},{"_id":"themes/3-hexo/source/img/avatar.jpg","hash":"bc0902639dab195e097f11b43b00ca76860f56fb","modified":1570519084996},{"_id":"themes/3-hexo/source/css/hl_theme/zenbum.styl","hash":"92941a6ae73b74f44ad7c559c5548c44073c644a","modified":1570265983658},{"_id":"themes/3-hexo/source/js/gitment.js","hash":"67984b83cd46ff4300d4fd959bf6c17dd66b4136","modified":1570265983673},{"_id":"themes/3-hexo/source/js/gitalk.js","hash":"536f28c4354a13582af826d9d9b2cb27cec07dc6","modified":1570265983671},{"_id":"public/2019/10/07/MarkDown-typora/index.html","hash":"36d2548328ee1482b4bed070cd2a95e95314735a","modified":1571515175971},{"_id":"public/2019/10/06/linux+nginx+hexo/index.html","hash":"db067f981656e5ac09513558ed76997897968464","modified":1571515175974},{"_id":"public/categories/工具/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168365},{"_id":"public/categories/建站/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168365},{"_id":"public/archives/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168363},{"_id":"public/archives/2019/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364},{"_id":"public/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168366},{"_id":"public/archives/2019/10/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168365},{"_id":"public/tags/文本工具/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168366},{"_id":"public/tags/工具/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168366},{"_id":"public/tags/服務器/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168366},{"_id":"public/img/school-book.png","hash":"711ec983c874e093bb89eb77afcbdf6741fa61ee","modified":1570954400878},{"_id":"public/img/brown-papersq.png","hash":"3a1332ede3a75a3d24f60b6ed69035b72da5e182","modified":1570954400878},{"_id":"public/css/fonts/icomoon.eot","hash":"b6195bedc1cb2f9cfcb26cc27021f2e94be2ab0a","modified":1570954400878},{"_id":"public/css/fonts/icomoon.woff","hash":"3985d29416bb9b19f50a2f20f2bbbce47f10af8d","modified":1570954400878},{"_id":"public/css/fonts/icomoon.ttf","hash":"eb976d8b8559fcddfc2658a03a4350cb566fc06b","modified":1570954400878},{"_id":"public/css/fonts/iconfont.eot","hash":"3dfe8e557d9dfaf39bca088a02b76deb82dbaa3d","modified":1570954400878},{"_id":"public/css/fonts/icomoon.svg","hash":"b5e7562c8494b0ddb3a70ecc5545ef7340d8e971","modified":1570954400878},{"_id":"public/css/fonts/iconfont.ttf","hash":"aa087561480fb9c2cfd541e33d1e99d5ac1a56bb","modified":1570954400878},{"_id":"public/css/fonts/iconfont.woff","hash":"f8ed131ccf13f4bdd3ec11fc3e997339dd7b66ba","modified":1570954400879},{"_id":"public/css/fonts/iconfont.svg","hash":"7e54ae44c02faa319c4fe128e1e6bda38eae5c9d","modified":1570954400879},{"_id":"public/img/alipay.jpg","hash":"e457d1d3dfefbbd824d154cf756a2c6d10b812a2","modified":1570954403247},{"_id":"public/img/article-list-background.jpeg","hash":"4fdf8b3e53dd02d6ee6360aebfadb0cba1fb5633","modified":1570954403248},{"_id":"public/img/weixin.jpg","hash":"8dafb22561698d0758fba9ea2a45abf6ad3512a2","modified":1570954403253},{"_id":"public/css/mobile.css","hash":"79ab291be160e0ca753512a96c5198f7477f13be","modified":1570954403272},{"_id":"public/js/jquery.autocomplete.min.js","hash":"7b8ac4d06c9e763963832529f44a56ad42a81e5f","modified":1570954403273},{"_id":"public/js/search.js","hash":"c80c9a231ee040c7adc07a477793873fb85ce8bc","modified":1570954403273},{"_id":"public/css/hl_theme/atom-light.css","hash":"a3c8f3ee9a655594eff7ac545cb2e6914c1abcc2","modified":1570954403273},{"_id":"public/css/hl_theme/brown-paper.css","hash":"500c8e750373f6656ff49a7857c871ceedcf8777","modified":1570954403273},{"_id":"public/css/hl_theme/github-gist.css","hash":"7a41c1c479d09df875f99f1f6d94aac42e9e2ad0","modified":1570954403273},{"_id":"public/css/hl_theme/atom-dark.css","hash":"88d11052a24e8100af6248eb4dbe1ce7b0e96408","modified":1570954403273},{"_id":"public/css/hl_theme/gruvbox-dark.css","hash":"8c440d9b4ee19ac03eaee3c6af78ba52e5ba5535","modified":1570954403274},{"_id":"public/css/hl_theme/darcula.css","hash":"4341074bae4bc9f0b86e32b623e27babc0159b6e","modified":1570954403274},{"_id":"public/css/hl_theme/gruvbox-light.css","hash":"30514aaa242a34647aa666cfca4fc74c595ea8f2","modified":1570954403274},{"_id":"public/css/hl_theme/github.css","hash":"e05a0806a508a26b9f3f3794b6b588ec6504ad3f","modified":1570954403274},{"_id":"public/css/hl_theme/kimbie-dark.css","hash":"728527fcc308da454722c119b89e6da3025bd1e3","modified":1570954403275},{"_id":"public/css/hl_theme/kimbie-light.css","hash":"0c61926c989163faefb031d27bce3e287d6e10f2","modified":1570954403275},{"_id":"public/css/hl_theme/school-book.css","hash":"ffbbcd13a74ac2404262c50b7a43053dfd0096ff","modified":1570954403275},{"_id":"public/css/hl_theme/railscasts.css","hash":"511f2fd2a84d426e5da5cb17880cc08f73beb002","modified":1570954403275},{"_id":"public/css/hl_theme/rainbow.css","hash":"7ff4251938076ddb7e4e49413db82653e5b61321","modified":1570954403275},{"_id":"public/css/hl_theme/sublime.css","hash":"f65c5b116d9213afb9c324384a2f3bc86cb71121","modified":1570954403275},{"_id":"public/css/hl_theme/sunburst.css","hash":"8a135abac1512cf430d1d1ad2304b79afa1a4d6e","modified":1570954403275},{"_id":"public/css/hl_theme/zenbum.css","hash":"0a78f74a93568e20b32ca7427c719e9bae9a0b55","modified":1570954403276},{"_id":"public/css/style.css","hash":"07df7b0c130e9965b1ff10e98351e923178883d4","modified":1570954403276},{"_id":"public/css/gitalk.css","hash":"58177ce227c50ee359fbf99a4fdd26058887afc5","modified":1570954403276},{"_id":"public/js/jquery.pjax.js","hash":"191c49fdb40dff115a49cfd2b30dffb888d86550","modified":1570954403277},{"_id":"public/js/iconfont.js","hash":"3a0869ca1b09af07d82987e343a3bc4cb9558ecb","modified":1570954403278},{"_id":"public/js/script.js","hash":"7502191e29366a11323dc72ae365b1aed254e6f2","modified":1570954403278},{"_id":"public/css/fonts/selection.json","hash":"047b615ea32dc48dae5b964061427d41feaaafdf","modified":1570954403278},{"_id":"public/js/gitment.js","hash":"59a1e03f2b0ce61dd9bd405d3c52d3e07cc10dec","modified":1570954403278},{"_id":"public/js/gitalk.js","hash":"d1eb82a3280981bd652d9a8e323060e4311c547b","modified":1570954403278},{"_id":"public/img/avatar.jpg","hash":"bc0902639dab195e097f11b43b00ca76860f56fb","modified":1570954403443},{"_id":"source/_posts/Linux-mysql.md","hash":"8502de23cc4eb78b54cd6d3a4892ca123bde8452","modified":1571516161106},{"_id":"source/_posts/vue-collection1.md","hash":"9a7c95554bc4b69d3e050e49564300d79107ef36","modified":1571516308385},{"_id":"source/_posts/linux-nginx.md","hash":"7f57dd1109cb7526e7dcf66a510e1502a588056c","modified":1571516179033},{"_id":"source/_posts/Linux下安装使用nodjs+pm2.md","hash":"268b2e065d9ea0bb96b4b342f6af1f550f7fcf47","modified":1571516241530},{"_id":"public/2019/10/06/linux-nginx/index.html","hash":"a974e48ba4b8fd2270b6fa1d02e6794d7d2e49b8","modified":1571515175971},{"_id":"public/2019/10/06/Linux下安装使用nodjs+pm2/index.html","hash":"46f13a4b10424fe1f5f16f2ff6a9d387b647a282","modified":1571515175974},{"_id":"public/2019/10/06/Linux-mysql/index.html","hash":"490c14e1279b802f6273a99d3a71153f6b546da6","modified":1571515175974},{"_id":"public/2019/10/06/vue-collection1/index.html","hash":"0623992a543dbbcf0b41be202643ceae831c412e","modified":1571515175974},{"_id":"public/categories/数据/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168365},{"_id":"public/categories/前端/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168365},{"_id":"public/tags/数据库/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168367},{"_id":"public/tags/框架/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168367},{"_id":"public/tags/前端/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168367},{"_id":"source/_posts/VUE生命周期图解.md","hash":"8c457bf4fc75a4cb75eade823bc4a35137dd5ce3","modified":1571516337500},{"_id":"source/_posts/CSS隐藏元素的四种方法.md","hash":"6c8825e4abf0ad24445b80909ef84bfe0d2de381","modified":1571515901942},{"_id":"source/_posts/css文本间距和文本溢出的处理.md","hash":"fa233608b8538424b040405c28a476c5e94cc988","modified":1571515879738},{"_id":"source/_posts/vue中的动画.md","hash":"60846e09b1e005eb5b22f5ca15f1761d57b939db","modified":1571516387887},{"_id":"source/_posts/vuex公共数据仓库的使用.md","hash":"bb61b698a6ada1f933324d4d6e84747efa36e883","modified":1571516410990},{"_id":"source/_posts/VUE项目性能优化.md","hash":"38c81f34a4a9a56fc650b5794328474ee5ad1e94","modified":1571516363360},{"_id":"public/2019/10/06/VUE生命周期图解/index.html","hash":"eca75844f730d0f5c341346df40b5db1acf014dc","modified":1571515175974},{"_id":"public/2019/10/06/css文本间距和文本溢出的处理/index.html","hash":"0e6e9e85903dec202bc6f8660e459c6a97b5a66e","modified":1571515175975},{"_id":"public/2019/10/06/CSS隐藏元素的四种方法/index.html","hash":"f2d8074cb7dc2fe5e0944d2d4a6145649c0db6f5","modified":1571515175975},{"_id":"public/2019/10/06/vue中的动画/index.html","hash":"b52569c1be7dc0362e81b325a25c7b55fa29ee53","modified":1571515175975},{"_id":"public/2019/10/06/vuex公共数据仓库的使用/index.html","hash":"5561fa8226fdf8eeaa2a0bd334cb2029743cca30","modified":1571515175975},{"_id":"public/2019/10/06/VUE项目性能优化/index.html","hash":"1615160bbbea5aa1ef049e8d22095bc63855efd3","modified":1571515175975},{"_id":"public/archives/page/2/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168363},{"_id":"public/archives/2019/page/2/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364},{"_id":"public/archives/2019/10/page/2/index.html","hash":"601dd59f6f9c4787b907824308a208aac3118064","modified":1571515175979},{"_id":"public/page/2/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168366},{"_id":"public/tags/VUE/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168367},{"_id":"public/tags/css/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168367},{"_id":"source/_posts/AJAX基础.md","hash":"279145f202cd252abe383a916f90154c8e524636","modified":1571515811648},{"_id":"source/_posts/CSS-animation动画2D与3D.md","hash":"f0beef0a3d2a3c296b9c82681e92d7379574a693","modified":1571515826799},{"_id":"source/_posts/CSS隐藏元素的五种方法.md","hash":"b91f739517b6ae57920e92cced099c5b934c0d3b","modified":1571515939261},{"_id":"source/_posts/HTML5 应用程序缓存 manifest.md","hash":"d1e4770ab007d04ff87637060b2b8eb28f854a9c","modified":1571516054619},{"_id":"source/_posts/JS中forEach,for...in,for..of的区别.md","hash":"7a88c064cf37f5dc27c6bd4f3f1d3513fdafe70c","modified":1571516085582},{"_id":"source/_posts/Less的使用.md","hash":"95e342aebbdb141049c748f634607996782b5099","modified":1571516136482},{"_id":"source/_posts/Token身份验证.md","hash":"ad6bd4c0c35784032384ddb9585752cf5990a373","modified":1571516281783},{"_id":"source/_posts/flex布局 (IE至少11).md","hash":"5327f5351c61614f38df9cdbe5f0b27d1b102459","modified":1571515997726},{"_id":"source/_posts/generator 函数.md","hash":"e66a03c4fe6f2b6838e135a6bb7d76144dfdaae0","modified":1571516024559},{"_id":"source/_posts/json字符串、json对象、数组 三者之间的转换.md","hash":"2db6b9d5a6c45e0583d75c86e32285823f20bfad","modified":1571516112977},{"_id":"source/_posts/内存溢出内存泄露.md","hash":"75c971843a18434f5252bba98c3dbf4d665f4fc5","modified":1571515808141},{"_id":"source/_posts/跨域以及跨域的方法.md","hash":"d9501d4cf5f3843b681c2467afb668057a5bd2ab","modified":1571513644208},{"_id":"public/tags/CSS/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168368},{"_id":"public/2019/10/06/JS中forEach,for...in,for..of的区别/index.html","hash":"19a20c68fd1462f5b66940adc2d06a0e55b9ba6e","modified":1571515175975},{"_id":"public/2019/10/06/generator 函数/index.html","hash":"1f021ac4f8313369b4da0a32a8b2e1bd8147a3c6","modified":1571515175976},{"_id":"public/2019/10/06/CSS隐藏元素的五种方法/index.html","hash":"0bfb45d03dd8b558cb853910e919c1301cc20528","modified":1571515175975},{"_id":"public/2019/10/06/flex布局 (IE至少11)/index.html","hash":"7ffe3713b251b62ac38ff05464a242aaab8da651","modified":1571515175976},{"_id":"public/2019/10/06/CSS-animation动画2D与3D/index.html","hash":"bc0149a3931a4b8bca0759e538bce7983e967b21","modified":1571515175976},{"_id":"public/2019/10/06/AJAX基础/index.html","hash":"dcf45c0bcb3a8106cdae3ae336e3ec145791f378","modified":1571515175976},{"_id":"public/2019/10/06/HTML5 应用程序缓存 manifest/index.html","hash":"4ea978a8095ffab4a4ad56d7d0905bd3bf646e5e","modified":1571515175976},{"_id":"public/2019/10/06/json字符串、json对象、数组 三者之间的转换/index.html","hash":"b9248aece6309b0fce1bb3ef719ba812605fb283","modified":1571515175977},{"_id":"public/2019/10/06/跨域以及跨域的方法/index.html","hash":"55cb0fdb691aecf153780606ac64e6c3f67fa6dd","modified":1572776168361},{"_id":"public/2019/10/06/Token身份验证/index.html","hash":"eddc087ed1064e600d356531cb165e387505d7a2","modified":1571515175978},{"_id":"public/2019/10/06/内存溢出内存泄露/index.html","hash":"8887c0a0f0c25a94928483117ad34c6b8974d5d3","modified":1571515175978},{"_id":"public/2019/10/06/Less的使用/index.html","hash":"a18101006a72d77b6664bfdd9988a274e143660f","modified":1571515175978},{"_id":"public/archives/page/3/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168363},{"_id":"public/archives/2019/page/3/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364},{"_id":"public/archives/2019/10/page/3/index.html","hash":"601dd59f6f9c4787b907824308a208aac3118064","modified":1571515175979},{"_id":"public/page/3/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168366},{"_id":"public/categories/前端/page/2/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168365},{"_id":"public/tags/前端/page/2/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168367},{"_id":"public/tags/JS/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168367},{"_id":"public/tags/ES6/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168368},{"_id":"public/tags/响应式/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168368},{"_id":"public/tags/动画/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168368},{"_id":"public/tags/AJAX/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168368},{"_id":"public/tags/HTML/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168368},{"_id":"public/tags/JavaScript/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168369},{"_id":"public/tags/Token/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168369},{"_id":"public/tags/开发常识/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168369},{"_id":"public/tags/Less/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168369},{"_id":"source/_posts/Express-generator 脚手架.md","hash":"55f0e21583d228028cbdd8afaa6acf0f2d9d4e6a","modified":1571515969426},{"_id":"source/_posts/css文本间距和文本溢出的处理 (copy).md","hash":"1c243457746830474d10fd17969364ab3c421bae","modified":1571515858761},{"_id":"source/_posts/流媒体服务器的认识.md","hash":"01b850df6f251671ffba7d6f2a616141fdfbe3cb","modified":1571515809005},{"_id":"public/2019/10/06/css文本间距和文本溢出的处理 (copy)/index.html","hash":"2fe4f3378fef850fb61de43d7b5ec1f1b0b6b266","modified":1571515175987},{"_id":"public/2019/10/06/Express-generator 脚手架/index.html","hash":"579e81446729d757f3f3a0172edaff4bd92b772a","modified":1571515175987},{"_id":"public/2019/10/06/流媒体服务器的认识/index.html","hash":"b16bcb77778decffc19f150fa27c359d714617e5","modified":1571515175987},{"_id":"public/categories/后端/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168365},{"_id":"public/categories/服务器/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168366},{"_id":"public/tags/Nodejs/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168370},{"_id":"public/tags/后端/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168370},{"_id":"public/tags/脚手架/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168370},{"_id":"public/tags/服务器/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168370},{"_id":"public/tags/视频/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168370},{"_id":"public/2019/10/12/linux+nginx+hexo/index.html","hash":"0d10161d3be6f60cb7d62442da70675b15773ae7","modified":1572776168360},{"_id":"public/2019/10/12/Linux下安装使用nodjs+pm2/index.html","hash":"31ae318f04c286677f25c25a0a6047aeb02db383","modified":1572776168360},{"_id":"public/2019/10/09/HTML5 应用程序缓存 manifest/index.html","hash":"c5c5febb00714181054f45f5dfd608cbb3c63fde","modified":1572776168361},{"_id":"public/2019/10/09/Linux-mysql/index.html","hash":"04ea79c26f75ea4326886bf11083e05778396806","modified":1572776168361},{"_id":"public/2019/10/09/linux-nginx/index.html","hash":"e1f1eefefa661fb8d1b3560cdf22d51ca6ae5a0c","modified":1572776168361},{"_id":"public/2019/10/03/Token身份验证/index.html","hash":"374e08417afadaebc3b51a0f9a3d0d157154b8fc","modified":1572776168361},{"_id":"public/2019/10/02/Express-generator 脚手架/index.html","hash":"5aaac3426ea12557c132b99caf23b83ebbdeeb8e","modified":1572776168361},{"_id":"public/2019/09/20/CSS隐藏元素的五种方法/index.html","hash":"e3d30e5912292b89f0d8189aa5964431d3bfa9b5","modified":1572776168361},{"_id":"public/2019/08/30/vuex公共数据仓库的使用/index.html","hash":"0b184bf5b624b9986771ef5e9529437d1039e598","modified":1572776168361},{"_id":"public/2019/08/15/json字符串、json对象、数组 三者之间的转换/index.html","hash":"29580056c2401d5d0463be3bb637f334f6635453","modified":1572776168361},{"_id":"public/2019/08/11/VUE项目性能优化/index.html","hash":"07492604823e169be289b274c171731ca7d1e530","modified":1572776168362},{"_id":"public/2019/08/09/JS中forEach,for...in,for..of的区别/index.html","hash":"c85cc12e8023b254e1d89111351a9cac7d11e5d6","modified":1572776168362},{"_id":"public/2019/08/03/generator 函数/index.html","hash":"fbcdda58ae1f4ef207c526b2077cdd365a76ddad","modified":1572776168362},{"_id":"public/2019/07/22/VUE生命周期图解/index.html","hash":"633645aba172922b531f1850bc10bd397be0456e","modified":1572776168362},{"_id":"public/2019/07/04/vue-collection1/index.html","hash":"97eda5b57772d1d40d4593e5781eee2d88846b55","modified":1572776168362},{"_id":"public/2019/06/22/CSS-animation动画2D与3D/index.html","hash":"9d7e8a59aaa97aa6961d54656fb7c5d8b6e315b7","modified":1572776168362},{"_id":"public/2019/06/22/MarkDown-typora/index.html","hash":"739494c6514d3a650ae96d0a3d067ca360d0b96e","modified":1572776168362},{"_id":"public/2019/06/22/Less的使用/index.html","hash":"2ae18a4b790fa8ed8f47d22ced61b9b277dd7531","modified":1572776168362},{"_id":"public/2019/06/15/flex布局 (IE至少11)/index.html","hash":"e085ca239001db36038502dd0e13be7c38a0dd76","modified":1572776168362},{"_id":"public/2019/06/12/css文本间距和文本溢出的处理 (copy)/index.html","hash":"5f4bd71b1eb7dd946f0cdd9584d015ba1a3c6871","modified":1572776168363},{"_id":"public/2019/06/09/内存溢出内存泄露/index.html","hash":"53b0e22949ba2306fae8cdd2850333cf8c7b7565","modified":1572776168363},{"_id":"public/2019/05/29/CSS隐藏元素的四种方法/index.html","hash":"2f91e6fa1855dcc2bc0e6f75edf577a4ef7b15a5","modified":1572776168363},{"_id":"public/2019/06/08/css文本间距和文本溢出的处理/index.html","hash":"dcf23a3170214bbedbc85dd68d3d62240b4ad43f","modified":1572776168363},{"_id":"public/2019/05/17/vue中的动画/index.html","hash":"c35d9d9a14a142bd307c863d47f9565db83b3ef9","modified":1572776168363},{"_id":"public/2019/05/12/流媒体服务器的认识/index.html","hash":"e452c989c47f484752cff266452699ecd8a2b95a","modified":1572776168363},{"_id":"public/2019/04/06/AJAX基础/index.html","hash":"f9edb5c95657b0786efcabf49288017ad63a4fb7","modified":1572776168363},{"_id":"public/archives/2019/04/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364},{"_id":"public/archives/2019/05/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364},{"_id":"public/archives/2019/06/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364},{"_id":"public/archives/2019/07/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364},{"_id":"public/archives/2019/08/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364},{"_id":"public/archives/2019/09/index.html","hash":"af136027f6ca1473776673dd0ce282c38ef71ee4","modified":1572776168364}],"Category":[{"name":"工具","_id":"ck1opos6h0002fwtjn1n2o4ec"},{"name":"建站","_id":"ck1opos6l0004fwtjim2wk8dw"},{"name":"数据","_id":"ck1rp5iiw000fkwtjijk2xkll"},{"name":"前端","_id":"ck1s1786c000mkwtj1ijmfgm5"},{"name":"后端","_id":"ck1xyyf43000esstjj94dt96i"},{"name":"服务器","_id":"ck1xz95f3000isstjv26qsaqz"}],"Data":[],"Page":[],"Post":[{"title":"markdown工具 Typora 教程","date":"2019-06-22T14:39:56.000Z","comments":1,"_content":"\n[TOC]\n\n\n\n# Typora教程 \n\n## 1.标题\n\n使用简单的 `ctrl+数字键` 就可以快速完成各种级别的标题\n\n## 2.下划线\n\nctrl + u\n\n<u>下划线</u>\n\n---\n\n\n\n## 3.删除线\n\nalt + shift + 5\n\n~~删除线~~\n\n\n\n---\n\n\n\n## 4.字体加粗\n\n**ctrl_+ b**\n\n## 5.斜体字\n\nctr + i\n\n*字体倾斜*\n\n---\n\n\n\n## 6.无序列表\n\n```undefined\n* 无序列表1\n+ 无序列表2\n- 无序列表3\n```\n\n一级：减号+space + 回车\nN级： tab + 回车\n退出当前层级：回车+回车+....\n\n- 123\n- 456 \n - 阿瑟东\n - 阿瑟东\n - 阿瑟东\n - 阿瑟东\n - 阿瑟东\n\n---\n\n\n\n### 有序列表\n\n有序列表的好处是：只用输入1.后面回车会自动补全；\n输入数字+“.”之后输入空格\n1. 123\n2. 456\n3. 789\n\nshift+tab去除缩进\n\n### 任务列表\n\n```css123as1d32asd\n-[ ] 抽烟\n-[x] 喝酒\n-[ ] 烫头\n```\n\n---\n\n\n\n## 7.表格\n\nctrl+t\n\n| asd | asd | asd | asd | asd | asd |\n| :--: | :--: | ---- | ------: | ---- | ---- |\n| | | | | asd | asd |\n| asd | asd | asd | asd | | |\n| | | | | asd | |\n| | | | | | |\n| njio | 123 | asd | asd | | |\n| | | | | | |\n| asd | asd | asd | asd asd | asd | |\n| | | | | | |\n| | | | | | |\n\n---\n\n\n\n## 8.引用\n\n`> + space + enter` 或者 `ctrl + shift + q`\n\n> > asdasd\n> > as45d\n> >\n> > asd\n\nshift+tab去除缩进=退出引用\n\n---\n\n\n\n## 9、插入链接\n\nctrl + k\n\n[这是一个链接](www.baidu.com)\n\n---\n\n\n\n## 10、插入图片\n\n本地直接拖拉图片到 `md` 文件 或者配合 `MPic`完成图片上传图床并复制链接到 `md` 文件（推荐）或者 `ctrl + shift + i`\n\n\n\t\n\n\n\n---\n\n\n\n## 11、代码块\n\n\n\n一些功能是没用快捷键的需要自己配置，比如代码块就没有\n\n文件=》偏好设置=》找到并打开高级设置=》打開conf.user.json=》\n我這裏設置的 \"Ctrl+Shift+p\"\n\n```javascript\n\n```\n\n```javascript\n\"keyBingding\":{\n\"Code Fences\":\"Ctrl+Shift+p\"\n}\n\n\n```\n\n---\n\n\n\n## 對文本的操作\n\n### 12、文章跳转\n\n`ctrl + home` 跳转至文章开头，`ctrl + end` 跳转至文章末尾，这个就不再演示了\n\n13、选中英文单词/中文\n\n`ctrl + d` 或者 `ctrl + shift + left/right` 左右进行文本选中\n\n---\n\n\n\n## 15、按行选中\n\nctrl + l\n\n---\n\n\n\n### 16、快速搜索\n\nctrl + f\n\n---\n\n\n\n### 17、替换\n\nctrl + h\n\n---\n\n\n\n#### 19、快速打开笔记\n\nctrl + p\n\n---\n\n\n\n### 20、toc 快速生成目录\n\n[toc] + enter\n\n[TOC]\n\n---\n\n\n\n#### 21、着重关键字\n\nctrl + shift + 反引号键（tab 键上面那个键）\n\n`著重關鍵字`\n\n22、表情符号\n\n英文状态下的引号，输入字母自动显示表情符号\n\n:zap: asd :blonde_woman:asd\n\n---\n\n\n\n#### 23、新建文件\n\n`ctrl + n`，这个就不再演示了\n\n26、分割线\n\n`--- + enter`，这个也不再演示\n\n---\n\n---\n\n\n\n#### 29、段落快捷键\n\n```\nctrl + 0\n```\n\n---\n\n\n\n## 30、定义脚注\n\n```\n文字[^脚注]\n```","source":"_posts/MarkDown-typora.md","raw":"---\ntitle: markdown工具 Typora 教程\ndate: 2019-06-22 22:39:56\ntags:\n - 文本工具\ncomments: true\ncategories: 工具\n---\n\n[TOC]\n\n\n\n# Typora教程 \n\n## 1.标题\n\n使用简单的 `ctrl+数字键` 就可以快速完成各种级别的标题\n\n## 2.下划线\n\nctrl + u\n\n<u>下划线</u>\n\n---\n\n\n\n## 3.删除线\n\nalt + shift + 5\n\n~~删除线~~\n\n\n\n---\n\n\n\n## 4.字体加粗\n\n**ctrl_+ b**\n\n## 5.斜体字\n\nctr + i\n\n*字体倾斜*\n\n---\n\n\n\n## 6.无序列表\n\n```undefined\n* 无序列表1\n+ 无序列表2\n- 无序列表3\n```\n\n一级：减号+space + 回车\nN级： tab + 回车\n退出当前层级：回车+回车+....\n\n- 123\n- 456 \n - 阿瑟东\n - 阿瑟东\n - 阿瑟东\n - 阿瑟东\n - 阿瑟东\n\n---\n\n\n\n### 有序列表\n\n有序列表的好处是：只用输入1.后面回车会自动补全；\n输入数字+“.”之后输入空格\n1. 123\n2. 456\n3. 789\n\nshift+tab去除缩进\n\n### 任务列表\n\n```css123as1d32asd\n-[ ] 抽烟\n-[x] 喝酒\n-[ ] 烫头\n```\n\n---\n\n\n\n## 7.表格\n\nctrl+t\n\n| asd | asd | asd | asd | asd | asd |\n| :--: | :--: | ---- | ------: | ---- | ---- |\n| | | | | asd | asd |\n| asd | asd | asd | asd | | |\n| | | | | asd | |\n| | | | | | |\n| njio | 123 | asd | asd | | |\n| | | | | | |\n| asd | asd | asd | asd asd | asd | |\n| | | | | | |\n| | | | | | |\n\n---\n\n\n\n## 8.引用\n\n`> + space + enter` 或者 `ctrl + shift + q`\n\n> > asdasd\n> > as45d\n> >\n> > asd\n\nshift+tab去除缩进=退出引用\n\n---\n\n\n\n## 9、插入链接\n\nctrl + k\n\n[这是一个链接](www.baidu.com)\n\n---\n\n\n\n## 10、插入图片\n\n本地直接拖拉图片到 `md` 文件 或者配合 `MPic`完成图片上传图床并复制链接到 `md` 文件（推荐）或者 `ctrl + shift + i`\n\n\n\t\n\n\n\n---\n\n\n\n## 11、代码块\n\n\n\n一些功能是没用快捷键的需要自己配置，比如代码块就没有\n\n文件=》偏好设置=》找到并打开高级设置=》打開conf.user.json=》\n我這裏設置的 \"Ctrl+Shift+p\"\n\n```javascript\n\n```\n\n```javascript\n\"keyBingding\":{\n\"Code Fences\":\"Ctrl+Shift+p\"\n}\n\n\n```\n\n---\n\n\n\n## 對文本的操作\n\n### 12、文章跳转\n\n`ctrl + home` 跳转至文章开头，`ctrl + end` 跳转至文章末尾，这个就不再演示了\n\n13、选中英文单词/中文\n\n`ctrl + d` 或者 `ctrl + shift + left/right` 左右进行文本选中\n\n---\n\n\n\n## 15、按行选中\n\nctrl + l\n\n---\n\n\n\n### 16、快速搜索\n\nctrl + f\n\n---\n\n\n\n### 17、替换\n\nctrl + h\n\n---\n\n\n\n#### 19、快速打开笔记\n\nctrl + p\n\n---\n\n\n\n### 20、toc 快速生成目录\n\n[toc] + enter\n\n[TOC]\n\n---\n\n\n\n#### 21、着重关键字\n\nctrl + shift + 反引号键（tab 键上面那个键）\n\n`著重關鍵字`\n\n22、表情符号\n\n英文状态下的引号，输入字母自动显示表情符号\n\n:zap: asd :blonde_woman:asd\n\n---\n\n\n\n#### 23、新建文件\n\n`ctrl + n`，这个就不再演示了\n\n26、分割线\n\n`--- + enter`，这个也不再演示\n\n---\n\n---\n\n\n\n#### 29、段落快捷键\n\n```\nctrl + 0\n```\n\n---\n\n\n\n## 30、定义脚注\n\n```\n文字[^脚注]\n```","slug":"MarkDown-typora","published":1,"updated":"2019-10-19T20:17:42.883Z","_id":"ck1opos680000fwtjov3z6jtb","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h1 id=\"Typora教程\"><a href=\"#Typora教程\" class=\"headerlink\" title=\"Typora教程\"></a>Typora教程</h1><h2 id=\"1-标题\"><a href=\"#1-标题\" class=\"headerlink\" title=\"1.标题\"></a>1.标题</h2><p>使用简单的 <code>ctrl+数字键</code> 就可以快速完成各种级别的标题</p>\n<h2 id=\"2-下划线\"><a href=\"#2-下划线\" class=\"headerlink\" title=\"2.下划线\"></a>2.下划线</h2><p>ctrl + u</p>\n<p><u>下划线</u></p>\n<hr>\n<h2 id=\"3-删除线\"><a href=\"#3-删除线\" class=\"headerlink\" title=\"3.删除线\"></a>3.删除线</h2><p>alt + shift + 5</p>\n<p><del>删除线</del></p>\n<hr>\n<h2 id=\"4-字体加粗\"><a href=\"#4-字体加粗\" class=\"headerlink\" title=\"4.字体加粗\"></a>4.字体加粗</h2><p><strong>ctrl_+ b</strong></p>\n<h2 id=\"5-斜体字\"><a href=\"#5-斜体字\" class=\"headerlink\" title=\"5.斜体字\"></a>5.斜体字</h2><p>ctr + i</p>\n<p><em>字体倾斜</em></p>\n<hr>\n<h2 id=\"6-无序列表\"><a href=\"#6-无序列表\" class=\"headerlink\" title=\"6.无序列表\"></a>6.无序列表</h2><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">* 无序列表1</span><br><span class=\"line\">+ 无序列表2</span><br><span class=\"line\">- 无序列表3</span><br></pre></td></tr></table></figure>\n\n<p>一级：减号+space + 回车<br>N级： tab + 回车<br>退出当前层级：回车+回车+….</p>\n<ul>\n<li>123</li>\n<li>456 <ul>\n<li>阿瑟东</li>\n<li>阿瑟东</li>\n<li>阿瑟东<ul>\n<li>阿瑟东</li>\n<li>阿瑟东</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<hr>\n<h3 id=\"有序列表\"><a href=\"#有序列表\" class=\"headerlink\" title=\"有序列表\"></a>有序列表</h3><p>有序列表的好处是：只用输入1.后面回车会自动补全；<br>输入数字+“.”之后输入空格</p>\n<ol>\n<li>123</li>\n<li>456</li>\n<li>789</li>\n</ol>\n<p>shift+tab去除缩进</p>\n<h3 id=\"任务列表\"><a href=\"#任务列表\" class=\"headerlink\" title=\"任务列表\"></a>任务列表</h3><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">-[ ] 抽烟</span><br><span class=\"line\">-[x] 喝酒</span><br><span class=\"line\">-[ ] 烫头</span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"7-表格\"><a href=\"#7-表格\" class=\"headerlink\" title=\"7.表格\"></a>7.表格</h2><p>ctrl+t</p>\n<table>\n<thead>\n<tr>\n<th align=\"center\">asd</th>\n<th align=\"center\">asd</th>\n<th>asd</th>\n<th align=\"right\">asd</th>\n<th>asd</th>\n<th>asd</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td>asd</td>\n<td>asd</td>\n</tr>\n<tr>\n<td align=\"center\">asd</td>\n<td align=\"center\">asd</td>\n<td>asd</td>\n<td align=\"right\">asd</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td>asd</td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\">njio</td>\n<td align=\"center\">123</td>\n<td>asd</td>\n<td align=\"right\">asd</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\">asd</td>\n<td align=\"center\">asd</td>\n<td>asd</td>\n<td align=\"right\">asd asd</td>\n<td>asd</td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td></td>\n<td></td>\n</tr>\n</tbody></table>\n<hr>\n<h2 id=\"8-引用\"><a href=\"#8-引用\" class=\"headerlink\" title=\"8.引用\"></a>8.引用</h2><p><code>> + space + enter</code> 或者 <code>ctrl + shift + q</code></p>\n<blockquote>\n<blockquote>\n<p>asdasd<br>as45d</p>\n<p>asd</p>\n</blockquote>\n</blockquote>\n<p>shift+tab去除缩进=退出引用</p>\n<hr>\n<h2 id=\"9、插入链接\"><a href=\"#9、插入链接\" class=\"headerlink\" title=\"9、插入链接\"></a>9、插入链接</h2><p>ctrl + k</p>\n<p><a href=\"www.baidu.com\">这是一个链接</a></p>\n<hr>\n<h2 id=\"10、插入图片\"><a href=\"#10、插入图片\" class=\"headerlink\" title=\"10、插入图片\"></a>10、插入图片</h2><p>本地直接拖拉图片到 <code>md</code> 文件 或者配合 <code>MPic</code>完成图片上传图床并复制链接到 <code>md</code> 文件（推荐）或者 <code>ctrl + shift + i</code></p>\n<p> <img src=\"H:%5C%E6%A1%8C%E9%9D%A2%5CdeskEditWork%5Cray-hexo%5Cgit-ray.github.io%5Cpublic%5Cimg%5Cjay.jpg\" alt=\"jay\"></p>\n<p><img src=\"http://kityminder-img.gz.bcebos.com/5400df503d9a8a494e2b57b13757ff63149e7a1e\" alt></p>\n<hr>\n<h2 id=\"11、代码块\"><a href=\"#11、代码块\" class=\"headerlink\" title=\"11、代码块\"></a>11、代码块</h2><p>一些功能是没用快捷键的需要自己配置，比如代码块就没有</p>\n<p>文件=》偏好设置=》找到并打开高级设置=》打開conf.user.json=》<br>我這裏設置的 “Ctrl+Shift+p”</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"></span><br><span class=\"line\"></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"string\">\"keyBingding\"</span>:{</span><br><span class=\"line\"><span class=\"string\">\"Code Fences\"</span>:<span class=\"string\">\"Ctrl+Shift+p\"</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"對文本的操作\"><a href=\"#對文本的操作\" class=\"headerlink\" title=\"對文本的操作\"></a>對文本的操作</h2><h3 id=\"12、文章跳转\"><a href=\"#12、文章跳转\" class=\"headerlink\" title=\"12、文章跳转\"></a>12、文章跳转</h3><p><code>ctrl + home</code> 跳转至文章开头，<code>ctrl + end</code> 跳转至文章末尾，这个就不再演示了</p>\n<p>13、选中英文单词/中文</p>\n<p><code>ctrl + d</code> 或者 <code>ctrl + shift + left/right</code> 左右进行文本选中</p>\n<hr>\n<h2 id=\"15、按行选中\"><a href=\"#15、按行选中\" class=\"headerlink\" title=\"15、按行选中\"></a>15、按行选中</h2><p>ctrl + l</p>\n<hr>\n<h3 id=\"16、快速搜索\"><a href=\"#16、快速搜索\" class=\"headerlink\" title=\"16、快速搜索\"></a>16、快速搜索</h3><p>ctrl + f</p>\n<hr>\n<h3 id=\"17、替换\"><a href=\"#17、替换\" class=\"headerlink\" title=\"17、替换\"></a>17、替换</h3><p>ctrl + h</p>\n<hr>\n<h4 id=\"19、快速打开笔记\"><a href=\"#19、快速打开笔记\" class=\"headerlink\" title=\"19、快速打开笔记\"></a>19、快速打开笔记</h4><p>ctrl + p</p>\n<hr>\n<h3 id=\"20、toc-快速生成目录\"><a href=\"#20、toc-快速生成目录\" class=\"headerlink\" title=\"20、toc 快速生成目录\"></a>20、toc 快速生成目录</h3><p>[toc] + enter</p>\n<p>[TOC]</p>\n<hr>\n<h4 id=\"21、着重关键字\"><a href=\"#21、着重关键字\" class=\"headerlink\" title=\"21、着重关键字\"></a>21、着重关键字</h4><p>ctrl + shift + 反引号键（tab 键上面那个键）</p>\n<p><code>著重關鍵字</code></p>\n<p>22、表情符号</p>\n<p>英文状态下的引号，输入字母自动显示表情符号</p>\n<p>:zap: asd :blonde_woman:asd</p>\n<hr>\n<h4 id=\"23、新建文件\"><a href=\"#23、新建文件\" class=\"headerlink\" title=\"23、新建文件\"></a>23、新建文件</h4><p><code>ctrl + n</code>，这个就不再演示了</p>\n<p>26、分割线</p>\n<p><code>--- + enter</code>，这个也不再演示</p>\n<hr>\n<hr>\n<h4 id=\"29、段落快捷键\"><a href=\"#29、段落快捷键\" class=\"headerlink\" title=\"29、段落快捷键\"></a>29、段落快捷键</h4><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">ctrl + 0</span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"30、定义脚注\"><a href=\"#30、定义脚注\" class=\"headerlink\" title=\"30、定义脚注\"></a>30、定义脚注</h2><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">文字[^脚注]</span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h1 id=\"Typora教程\"><a href=\"#Typora教程\" class=\"headerlink\" title=\"Typora教程\"></a>Typora教程</h1><h2 id=\"1-标题\"><a href=\"#1-标题\" class=\"headerlink\" title=\"1.标题\"></a>1.标题</h2><p>使用简单的 <code>ctrl+数字键</code> 就可以快速完成各种级别的标题</p>\n<h2 id=\"2-下划线\"><a href=\"#2-下划线\" class=\"headerlink\" title=\"2.下划线\"></a>2.下划线</h2><p>ctrl + u</p>\n<p><u>下划线</u></p>\n<hr>\n<h2 id=\"3-删除线\"><a href=\"#3-删除线\" class=\"headerlink\" title=\"3.删除线\"></a>3.删除线</h2><p>alt + shift + 5</p>\n<p><del>删除线</del></p>\n<hr>\n<h2 id=\"4-字体加粗\"><a href=\"#4-字体加粗\" class=\"headerlink\" title=\"4.字体加粗\"></a>4.字体加粗</h2><p><strong>ctrl_+ b</strong></p>\n<h2 id=\"5-斜体字\"><a href=\"#5-斜体字\" class=\"headerlink\" title=\"5.斜体字\"></a>5.斜体字</h2><p>ctr + i</p>\n<p><em>字体倾斜</em></p>\n<hr>\n<h2 id=\"6-无序列表\"><a href=\"#6-无序列表\" class=\"headerlink\" title=\"6.无序列表\"></a>6.无序列表</h2><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">* 无序列表1</span><br><span class=\"line\">+ 无序列表2</span><br><span class=\"line\">- 无序列表3</span><br></pre></td></tr></table></figure>\n\n<p>一级：减号+space + 回车<br>N级： tab + 回车<br>退出当前层级：回车+回车+….</p>\n<ul>\n<li>123</li>\n<li>456 <ul>\n<li>阿瑟东</li>\n<li>阿瑟东</li>\n<li>阿瑟东<ul>\n<li>阿瑟东</li>\n<li>阿瑟东</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<hr>\n<h3 id=\"有序列表\"><a href=\"#有序列表\" class=\"headerlink\" title=\"有序列表\"></a>有序列表</h3><p>有序列表的好处是：只用输入1.后面回车会自动补全；<br>输入数字+“.”之后输入空格</p>\n<ol>\n<li>123</li>\n<li>456</li>\n<li>789</li>\n</ol>\n<p>shift+tab去除缩进</p>\n<h3 id=\"任务列表\"><a href=\"#任务列表\" class=\"headerlink\" title=\"任务列表\"></a>任务列表</h3><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">-[ ] 抽烟</span><br><span class=\"line\">-[x] 喝酒</span><br><span class=\"line\">-[ ] 烫头</span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"7-表格\"><a href=\"#7-表格\" class=\"headerlink\" title=\"7.表格\"></a>7.表格</h2><p>ctrl+t</p>\n<table>\n<thead>\n<tr>\n<th align=\"center\">asd</th>\n<th align=\"center\">asd</th>\n<th>asd</th>\n<th align=\"right\">asd</th>\n<th>asd</th>\n<th>asd</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td>asd</td>\n<td>asd</td>\n</tr>\n<tr>\n<td align=\"center\">asd</td>\n<td align=\"center\">asd</td>\n<td>asd</td>\n<td align=\"right\">asd</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td>asd</td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\">njio</td>\n<td align=\"center\">123</td>\n<td>asd</td>\n<td align=\"right\">asd</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\">asd</td>\n<td align=\"center\">asd</td>\n<td>asd</td>\n<td align=\"right\">asd asd</td>\n<td>asd</td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"></td>\n<td></td>\n<td align=\"right\"></td>\n<td></td>\n<td></td>\n</tr>\n</tbody></table>\n<hr>\n<h2 id=\"8-引用\"><a href=\"#8-引用\" class=\"headerlink\" title=\"8.引用\"></a>8.引用</h2><p><code>> + space + enter</code> 或者 <code>ctrl + shift + q</code></p>\n<blockquote>\n<blockquote>\n<p>asdasd<br>as45d</p>\n<p>asd</p>\n</blockquote>\n</blockquote>\n<p>shift+tab去除缩进=退出引用</p>\n<hr>\n<h2 id=\"9、插入链接\"><a href=\"#9、插入链接\" class=\"headerlink\" title=\"9、插入链接\"></a>9、插入链接</h2><p>ctrl + k</p>\n<p><a href=\"www.baidu.com\">这是一个链接</a></p>\n<hr>\n<h2 id=\"10、插入图片\"><a href=\"#10、插入图片\" class=\"headerlink\" title=\"10、插入图片\"></a>10、插入图片</h2><p>本地直接拖拉图片到 <code>md</code> 文件 或者配合 <code>MPic</code>完成图片上传图床并复制链接到 <code>md</code> 文件（推荐）或者 <code>ctrl + shift + i</code></p>\n<p> <img src=\"H:%5C%E6%A1%8C%E9%9D%A2%5CdeskEditWork%5Cray-hexo%5Cgit-ray.github.io%5Cpublic%5Cimg%5Cjay.jpg\" alt=\"jay\"></p>\n<p><img src=\"http://kityminder-img.gz.bcebos.com/5400df503d9a8a494e2b57b13757ff63149e7a1e\" alt></p>\n<hr>\n<h2 id=\"11、代码块\"><a href=\"#11、代码块\" class=\"headerlink\" title=\"11、代码块\"></a>11、代码块</h2><p>一些功能是没用快捷键的需要自己配置，比如代码块就没有</p>\n<p>文件=》偏好设置=》找到并打开高级设置=》打開conf.user.json=》<br>我這裏設置的 “Ctrl+Shift+p”</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"></span><br><span class=\"line\"></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"string\">\"keyBingding\"</span>:{</span><br><span class=\"line\"><span class=\"string\">\"Code Fences\"</span>:<span class=\"string\">\"Ctrl+Shift+p\"</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"對文本的操作\"><a href=\"#對文本的操作\" class=\"headerlink\" title=\"對文本的操作\"></a>對文本的操作</h2><h3 id=\"12、文章跳转\"><a href=\"#12、文章跳转\" class=\"headerlink\" title=\"12、文章跳转\"></a>12、文章跳转</h3><p><code>ctrl + home</code> 跳转至文章开头，<code>ctrl + end</code> 跳转至文章末尾，这个就不再演示了</p>\n<p>13、选中英文单词/中文</p>\n<p><code>ctrl + d</code> 或者 <code>ctrl + shift + left/right</code> 左右进行文本选中</p>\n<hr>\n<h2 id=\"15、按行选中\"><a href=\"#15、按行选中\" class=\"headerlink\" title=\"15、按行选中\"></a>15、按行选中</h2><p>ctrl + l</p>\n<hr>\n<h3 id=\"16、快速搜索\"><a href=\"#16、快速搜索\" class=\"headerlink\" title=\"16、快速搜索\"></a>16、快速搜索</h3><p>ctrl + f</p>\n<hr>\n<h3 id=\"17、替换\"><a href=\"#17、替换\" class=\"headerlink\" title=\"17、替换\"></a>17、替换</h3><p>ctrl + h</p>\n<hr>\n<h4 id=\"19、快速打开笔记\"><a href=\"#19、快速打开笔记\" class=\"headerlink\" title=\"19、快速打开笔记\"></a>19、快速打开笔记</h4><p>ctrl + p</p>\n<hr>\n<h3 id=\"20、toc-快速生成目录\"><a href=\"#20、toc-快速生成目录\" class=\"headerlink\" title=\"20、toc 快速生成目录\"></a>20、toc 快速生成目录</h3><p>[toc] + enter</p>\n<p>[TOC]</p>\n<hr>\n<h4 id=\"21、着重关键字\"><a href=\"#21、着重关键字\" class=\"headerlink\" title=\"21、着重关键字\"></a>21、着重关键字</h4><p>ctrl + shift + 反引号键（tab 键上面那个键）</p>\n<p><code>著重關鍵字</code></p>\n<p>22、表情符号</p>\n<p>英文状态下的引号，输入字母自动显示表情符号</p>\n<p>:zap: asd :blonde_woman:asd</p>\n<hr>\n<h4 id=\"23、新建文件\"><a href=\"#23、新建文件\" class=\"headerlink\" title=\"23、新建文件\"></a>23、新建文件</h4><p><code>ctrl + n</code>，这个就不再演示了</p>\n<p>26、分割线</p>\n<p><code>--- + enter</code>，这个也不再演示</p>\n<hr>\n<hr>\n<h4 id=\"29、段落快捷键\"><a href=\"#29、段落快捷键\" class=\"headerlink\" title=\"29、段落快捷键\"></a>29、段落快捷键</h4><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">ctrl + 0</span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"30、定义脚注\"><a href=\"#30、定义脚注\" class=\"headerlink\" title=\"30、定义脚注\"></a>30、定义脚注</h2><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">文字[^脚注]</span><br></pre></td></tr></table></figure>"},{"title":"hexo博客网站一条龙","date":"2019-10-12T11:08:12.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n个人博客搭建一条龙,一条龙!，初级前端 :snake: 雷明 以身示范\n\n写给也想写博客的你，后续扩展和遇到的问题都会持续更新。\n\n---\n\n\n\n本篇主要 通过 linux+nodejs+github+hexo+nginx \n实现 本地提交代码=》 服务器端获取代码=》网页自动更新内容\n以下流程有很多会借鉴甚至粘贴复制其他博主的 零碎的东西 若有侵权请联系我。\n\n\n\n主要分为：\n\n[TOC]\n\n\n\n## \n\n---\n\n\n\n## 1.nodejs+hexo的本地环境搭建\n\n---\n\n## 2.hexo选择主题\n\n------\n\n## 3.租赁：域名 和 服务器\n\n---\n\n## 4.服务器环境搭建（linux+nginx+git）\n\n---\n\n## 5.域名的解析和nginx的配置\n\n---\n\n## 6.把本地代码push到github并下载到服务器里\n\n---\n\n## 7.完成配置您的博客可以通过域名访问了\n\n---\n\n## 8.申请SSL认证\n\n---\n\n","source":"_posts/linux+nginx+hexo.md","raw":"---\ntitle: hexo博客网站一条龙\ndate: 2019-10-12 19:08:12\ntags:\n - 工具\n - 服務器\ncomments: true\ncategories: 建站\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n个人博客搭建一条龙,一条龙!，初级前端 :snake: 雷明 以身示范\n\n写给也想写博客的你，后续扩展和遇到的问题都会持续更新。\n\n---\n\n\n\n本篇主要 通过 linux+nodejs+github+hexo+nginx \n实现 本地提交代码=》 服务器端获取代码=》网页自动更新内容\n以下流程有很多会借鉴甚至粘贴复制其他博主的 零碎的东西 若有侵权请联系我。\n\n\n\n主要分为：\n\n[TOC]\n\n\n\n## \n\n---\n\n\n\n## 1.nodejs+hexo的本地环境搭建\n\n---\n\n## 2.hexo选择主题\n\n------\n\n## 3.租赁：域名 和 服务器\n\n---\n\n## 4.服务器环境搭建（linux+nginx+git）\n\n---\n\n## 5.域名的解析和nginx的配置\n\n---\n\n## 6.把本地代码push到github并下载到服务器里\n\n---\n\n## 7.完成配置您的博客可以通过域名访问了\n\n---\n\n## 8.申请SSL认证\n\n---\n\n","slug":"linux+nginx+hexo","published":1,"_id":"ck1opos6e0001fwtjdzj9vytg","layout":"post","photos":[],"link":"","content":"<p>个人博客搭建一条龙,一条龙!，初级前端 :snake: 雷明 以身示范</p>\n<p>写给也想写博客的你，后续扩展和遇到的问题都会持续更新。</p>\n<hr>\n<p>本篇主要 通过 linux+nodejs+github+hexo+nginx<br>实现 本地提交代码=》 服务器端获取代码=》网页自动更新内容<br>以下流程有很多会借鉴甚至粘贴复制其他博主的 零碎的东西 若有侵权请联系我。</p>\n<p>主要分为：</p>\n<p>[TOC]</p>\n<h2 id><a href=\"#\" class=\"headerlink\" title></a></h2><hr>\n<h2 id=\"1-nodejs-hexo的本地环境搭建\"><a href=\"#1-nodejs-hexo的本地环境搭建\" class=\"headerlink\" title=\"1.nodejs+hexo的本地环境搭建\"></a>1.nodejs+hexo的本地环境搭建</h2><hr>\n<h2 id=\"2-hexo选择主题\"><a href=\"#2-hexo选择主题\" class=\"headerlink\" title=\"2.hexo选择主题\"></a>2.hexo选择主题</h2><hr>\n<h2 id=\"3-租赁：域名-和-服务器\"><a href=\"#3-租赁：域名-和-服务器\" class=\"headerlink\" title=\"3.租赁：域名 和 服务器\"></a>3.租赁：域名 和 服务器</h2><hr>\n<h2 id=\"4-服务器环境搭建（linux-nginx-git）\"><a href=\"#4-服务器环境搭建（linux-nginx-git）\" class=\"headerlink\" title=\"4.服务器环境搭建（linux+nginx+git）\"></a>4.服务器环境搭建（linux+nginx+git）</h2><hr>\n<h2 id=\"5-域名的解析和nginx的配置\"><a href=\"#5-域名的解析和nginx的配置\" class=\"headerlink\" title=\"5.域名的解析和nginx的配置\"></a>5.域名的解析和nginx的配置</h2><hr>\n<h2 id=\"6-把本地代码push到github并下载到服务器里\"><a href=\"#6-把本地代码push到github并下载到服务器里\" class=\"headerlink\" title=\"6.把本地代码push到github并下载到服务器里\"></a>6.把本地代码push到github并下载到服务器里</h2><hr>\n<h2 id=\"7-完成配置您的博客可以通过域名访问了\"><a href=\"#7-完成配置您的博客可以通过域名访问了\" class=\"headerlink\" title=\"7.完成配置您的博客可以通过域名访问了\"></a>7.完成配置您的博客可以通过域名访问了</h2><hr>\n<h2 id=\"8-申请SSL认证\"><a href=\"#8-申请SSL认证\" class=\"headerlink\" title=\"8.申请SSL认证\"></a>8.申请SSL认证</h2><hr>\n","site":{"data":{}},"excerpt":"","more":"<p>个人博客搭建一条龙,一条龙!，初级前端 :snake: 雷明 以身示范</p>\n<p>写给也想写博客的你，后续扩展和遇到的问题都会持续更新。</p>\n<hr>\n<p>本篇主要 通过 linux+nodejs+github+hexo+nginx<br>实现 本地提交代码=》 服务器端获取代码=》网页自动更新内容<br>以下流程有很多会借鉴甚至粘贴复制其他博主的 零碎的东西 若有侵权请联系我。</p>\n<p>主要分为：</p>\n<p>[TOC]</p>\n<h2 id><a href=\"#\" class=\"headerlink\" title></a></h2><hr>\n<h2 id=\"1-nodejs-hexo的本地环境搭建\"><a href=\"#1-nodejs-hexo的本地环境搭建\" class=\"headerlink\" title=\"1.nodejs+hexo的本地环境搭建\"></a>1.nodejs+hexo的本地环境搭建</h2><hr>\n<h2 id=\"2-hexo选择主题\"><a href=\"#2-hexo选择主题\" class=\"headerlink\" title=\"2.hexo选择主题\"></a>2.hexo选择主题</h2><hr>\n<h2 id=\"3-租赁：域名-和-服务器\"><a href=\"#3-租赁：域名-和-服务器\" class=\"headerlink\" title=\"3.租赁：域名 和 服务器\"></a>3.租赁：域名 和 服务器</h2><hr>\n<h2 id=\"4-服务器环境搭建（linux-nginx-git）\"><a href=\"#4-服务器环境搭建（linux-nginx-git）\" class=\"headerlink\" title=\"4.服务器环境搭建（linux+nginx+git）\"></a>4.服务器环境搭建（linux+nginx+git）</h2><hr>\n<h2 id=\"5-域名的解析和nginx的配置\"><a href=\"#5-域名的解析和nginx的配置\" class=\"headerlink\" title=\"5.域名的解析和nginx的配置\"></a>5.域名的解析和nginx的配置</h2><hr>\n<h2 id=\"6-把本地代码push到github并下载到服务器里\"><a href=\"#6-把本地代码push到github并下载到服务器里\" class=\"headerlink\" title=\"6.把本地代码push到github并下载到服务器里\"></a>6.把本地代码push到github并下载到服务器里</h2><hr>\n<h2 id=\"7-完成配置您的博客可以通过域名访问了\"><a href=\"#7-完成配置您的博客可以通过域名访问了\" class=\"headerlink\" title=\"7.完成配置您的博客可以通过域名访问了\"></a>7.完成配置您的博客可以通过域名访问了</h2><hr>\n<h2 id=\"8-申请SSL认证\"><a href=\"#8-申请SSL认证\" class=\"headerlink\" title=\"8.申请SSL认证\"></a>8.申请SSL认证</h2><hr>\n"},{"title":"Linux下安装nginx","date":"2019-10-08T16:19:38.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n[TOC]\n\n\n\n## Linux下安装Nginx\n\n### 介绍\n\n官网：<http://nginx.org/>\n中文文档: <http://www.nginx.cn/doc/>\n\n---\n\nNginx能干的事情很多,这里简要罗列一-些：\n\n1. 可直接支持Rails和PHP的程序\n2. 可作为HTTP反向代理服务器\n3. 作为负载均衡服务器\n4. 作为邮件代理服务器\n5. 帮助实现前端动静分离\n\n### Nginx安装\n\n#### **Nginx下载**\n\n官网下载：<http://nginx.org/en/download.html>\n或者直接在linux执行命令：`wget http://nginx.org/download/nginx-1.12.2.tar.gz`\n这里下载的版本是1.12.2\n\n#### **安装步骤**\n\n```bash\n# 安装依赖\nyum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel\n# 解压缩\ntar -zxvf linux-nginx-1.12.2.tar.gz\ncd nginx-1.12.2/\n# 执行配置\n./configure\n# 编译安装(默认安装在/usr/local/nginx)\nmake\nmake install\n```\n\n###### 防火墙配置\n\nnginx默认监听80端口，如果未关闭防火墙需要配置iptables规则开放80端口(以centos6为例)。\n编辑配置文件：`vim /etc/sysconfig/iptables`\n在文件中间添加iptables规则\n`-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT`\n重启防火墙：`service iptables restart`\n或者关闭iptables规则：`iptables -F && iptables -t nat -F`\n\n###### Nginx验证\n\nnginx主配置文件：`/usr/local/nginx/conf/nginx.conf`\nnginx日志文件：`/usr/local/nginx/logs/access.log`\n启动Nginx：`/usr/local/nginx/sbin/nginx`\n然后直接访问ip地址，比如：<http://192.168.0.110/>，如果能看到如下Nginx主页说明安装ok。\n\n###### Nginx常用命令\n\n测试配置文件：`${Nginx}/sbin/nginx -t`\n启动命令：`${Nginx}/sbin/nginx`\n停止命令：`${Nginx}/sbin/nginx -s stop/quit`\n重启命令：`${Nginx}/sbin/nginx -s reload`\n查看进程命令：`ps -ef | grep nginx`\n平滑重启：`kill -HUP [Nginx主进程号(即ps命令查到的PID)]`\n\n以上参考来自<https://www.jianshu.com/p/9f2c162ac77c>\n\n###### Linux下装多个 Nginx\n\n一般在./configure的阶段会要求通过prefix设置安装路径。\n因此，在./configure的时候指定不同的prefix就可以安装多个nginx啦\n\n值得注意的是，安装完之后，两个nginx的监听端口要设置成不同的监听端口。否则，会有一个nginx无法启动。\n\n```javascript\n./configure --prefix=/home/work/nginx1 .....//第一个nginx的安装配置 make && make install\n./configure --prefix=/home/work/nginx2 .....//第二个nginx的安装配置 make && make install\ncd /home/work/nginx1/conf/nginx.conf && 修改第一个nginx的监听端口. ./home/work/nginx1/sbin/nginx\ncd /home/work/nginx2/conf/nginx.conf && 修改第二个nginx的监听端口. ./home/work/nginx2/sbin/nginx\n```\n\n参考来自：<https://blog.csdn.net/qq_35071164/article/details/85621311>\n\n\n\n","source":"_posts/linux-nginx.md","raw":"---\ntitle: Linux下安装nginx\ndate: 2019-10-09 00:19:38\ntags:\n - 工具\n - 服務器\ncomments: true\ncategories: 建站\n\nupdated: 2019-10-07 22:27:55\n---\n\n[TOC]\n\n\n\n## Linux下安装Nginx\n\n### 介绍\n\n官网：<http://nginx.org/>\n中文文档: <http://www.nginx.cn/doc/>\n\n---\n\nNginx能干的事情很多,这里简要罗列一-些：\n\n1. 可直接支持Rails和PHP的程序\n2. 可作为HTTP反向代理服务器\n3. 作为负载均衡服务器\n4. 作为邮件代理服务器\n5. 帮助实现前端动静分离\n\n### Nginx安装\n\n#### **Nginx下载**\n\n官网下载：<http://nginx.org/en/download.html>\n或者直接在linux执行命令：`wget http://nginx.org/download/nginx-1.12.2.tar.gz`\n这里下载的版本是1.12.2\n\n#### **安装步骤**\n\n```bash\n# 安装依赖\nyum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel\n# 解压缩\ntar -zxvf linux-nginx-1.12.2.tar.gz\ncd nginx-1.12.2/\n# 执行配置\n./configure\n# 编译安装(默认安装在/usr/local/nginx)\nmake\nmake install\n```\n\n###### 防火墙配置\n\nnginx默认监听80端口，如果未关闭防火墙需要配置iptables规则开放80端口(以centos6为例)。\n编辑配置文件：`vim /etc/sysconfig/iptables`\n在文件中间添加iptables规则\n`-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT`\n重启防火墙：`service iptables restart`\n或者关闭iptables规则：`iptables -F && iptables -t nat -F`\n\n###### Nginx验证\n\nnginx主配置文件：`/usr/local/nginx/conf/nginx.conf`\nnginx日志文件：`/usr/local/nginx/logs/access.log`\n启动Nginx：`/usr/local/nginx/sbin/nginx`\n然后直接访问ip地址，比如：<http://192.168.0.110/>，如果能看到如下Nginx主页说明安装ok。\n\n###### Nginx常用命令\n\n测试配置文件：`${Nginx}/sbin/nginx -t`\n启动命令：`${Nginx}/sbin/nginx`\n停止命令：`${Nginx}/sbin/nginx -s stop/quit`\n重启命令：`${Nginx}/sbin/nginx -s reload`\n查看进程命令：`ps -ef | grep nginx`\n平滑重启：`kill -HUP [Nginx主进程号(即ps命令查到的PID)]`\n\n以上参考来自<https://www.jianshu.com/p/9f2c162ac77c>\n\n###### Linux下装多个 Nginx\n\n一般在./configure的阶段会要求通过prefix设置安装路径。\n因此，在./configure的时候指定不同的prefix就可以安装多个nginx啦\n\n值得注意的是，安装完之后，两个nginx的监听端口要设置成不同的监听端口。否则，会有一个nginx无法启动。\n\n```javascript\n./configure --prefix=/home/work/nginx1 .....//第一个nginx的安装配置 make && make install\n./configure --prefix=/home/work/nginx2 .....//第二个nginx的安装配置 make && make install\ncd /home/work/nginx1/conf/nginx.conf && 修改第一个nginx的监听端口. ./home/work/nginx1/sbin/nginx\ncd /home/work/nginx2/conf/nginx.conf && 修改第二个nginx的监听端口. ./home/work/nginx2/sbin/nginx\n```\n\n参考来自：<https://blog.csdn.net/qq_35071164/article/details/85621311>\n\n\n\n","slug":"linux-nginx","published":1,"_id":"ck1riqkbu0000kwtj6i2498pl","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"Linux下安装Nginx\"><a href=\"#Linux下安装Nginx\" class=\"headerlink\" title=\"Linux下安装Nginx\"></a>Linux下安装Nginx</h2><h3 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h3><p>官网：<a href=\"http://nginx.org/\" target=\"_blank\" rel=\"noopener\">http://nginx.org/</a><br>中文文档: <a href=\"http://www.nginx.cn/doc/\" target=\"_blank\" rel=\"noopener\">http://www.nginx.cn/doc/</a></p>\n<hr>\n<p>Nginx能干的事情很多,这里简要罗列一-些：</p>\n<ol>\n<li>可直接支持Rails和PHP的程序</li>\n<li>可作为HTTP反向代理服务器</li>\n<li>作为负载均衡服务器</li>\n<li>作为邮件代理服务器</li>\n<li>帮助实现前端动静分离</li>\n</ol>\n<h3 id=\"Nginx安装\"><a href=\"#Nginx安装\" class=\"headerlink\" title=\"Nginx安装\"></a>Nginx安装</h3><h4 id=\"Nginx下载\"><a href=\"#Nginx下载\" class=\"headerlink\" title=\"Nginx下载\"></a><strong>Nginx下载</strong></h4><p>官网下载：<a href=\"http://nginx.org/en/download.html\" target=\"_blank\" rel=\"noopener\">http://nginx.org/en/download.html</a><br>或者直接在linux执行命令：<code>wget http://nginx.org/download/nginx-1.12.2.tar.gz</code><br>这里下载的版本是1.12.2</p>\n<h4 id=\"安装步骤\"><a href=\"#安装步骤\" class=\"headerlink\" title=\"安装步骤\"></a><strong>安装步骤</strong></h4><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># 安装依赖</span></span><br><span class=\"line\">yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel</span><br><span class=\"line\"><span class=\"comment\"># 解压缩</span></span><br><span class=\"line\">tar -zxvf linux-nginx-1.12.2.tar.gz</span><br><span class=\"line\"><span class=\"built_in\">cd</span> nginx-1.12.2/</span><br><span class=\"line\"><span class=\"comment\"># 执行配置</span></span><br><span class=\"line\">./configure</span><br><span class=\"line\"><span class=\"comment\"># 编译安装(默认安装在/usr/local/nginx)</span></span><br><span class=\"line\">make</span><br><span class=\"line\">make install</span><br></pre></td></tr></table></figure>\n\n<h6 id=\"防火墙配置\"><a href=\"#防火墙配置\" class=\"headerlink\" title=\"防火墙配置\"></a>防火墙配置</h6><p>nginx默认监听80端口，如果未关闭防火墙需要配置iptables规则开放80端口(以centos6为例)。<br>编辑配置文件：<code>vim /etc/sysconfig/iptables</code><br>在文件中间添加iptables规则<br><code>-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT</code><br>重启防火墙：<code>service iptables restart</code><br>或者关闭iptables规则：<code>iptables -F && iptables -t nat -F</code></p>\n<h6 id=\"Nginx验证\"><a href=\"#Nginx验证\" class=\"headerlink\" title=\"Nginx验证\"></a>Nginx验证</h6><p>nginx主配置文件：<code>/usr/local/nginx/conf/nginx.conf</code><br>nginx日志文件：<code>/usr/local/nginx/logs/access.log</code><br>启动Nginx：<code>/usr/local/nginx/sbin/nginx</code><br>然后直接访问ip地址，比如：<a href=\"http://192.168.0.110/\" target=\"_blank\" rel=\"noopener\">http://192.168.0.110/</a>，如果能看到如下Nginx主页说明安装ok。</p>\n<h6 id=\"Nginx常用命令\"><a href=\"#Nginx常用命令\" class=\"headerlink\" title=\"Nginx常用命令\"></a>Nginx常用命令</h6><p>测试配置文件：<code>${Nginx}/sbin/nginx -t</code><br>启动命令：<code>${Nginx}/sbin/nginx</code><br>停止命令：<code>${Nginx}/sbin/nginx -s stop/quit</code><br>重启命令：<code>${Nginx}/sbin/nginx -s reload</code><br>查看进程命令：<code>ps -ef | grep nginx</code><br>平滑重启：<code>kill -HUP [Nginx主进程号(即ps命令查到的PID)]</code></p>\n<p>以上参考来自<a href=\"https://www.jianshu.com/p/9f2c162ac77c\" target=\"_blank\" rel=\"noopener\">https://www.jianshu.com/p/9f2c162ac77c</a></p>\n<h6 id=\"Linux下装多个-Nginx\"><a href=\"#Linux下装多个-Nginx\" class=\"headerlink\" title=\"Linux下装多个 Nginx\"></a>Linux下装多个 Nginx</h6><p>一般在./configure的阶段会要求通过prefix设置安装路径。<br>因此，在./configure的时候指定不同的prefix就可以安装多个nginx啦</p>\n<p>值得注意的是，安装完之后，两个nginx的监听端口要设置成不同的监听端口。否则，会有一个nginx无法启动。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">./configure --prefix=<span class=\"regexp\">/home/</span>work/nginx1 .....<span class=\"comment\">//第一个nginx的安装配置 make && make install</span></span><br><span class=\"line\">./configure --prefix=<span class=\"regexp\">/home/</span>work/nginx2 .....<span class=\"comment\">//第二个nginx的安装配置 make && make install</span></span><br><span class=\"line\">cd /home/work/nginx1/conf/nginx.conf && 修改第一个nginx的监听端口. ./home/work/nginx1/sbin/nginx</span><br><span class=\"line\">cd /home/work/nginx2/conf/nginx.conf && 修改第二个nginx的监听端口. ./home/work/nginx2/sbin/nginx</span><br></pre></td></tr></table></figure>\n\n<p>参考来自：<a href=\"https://blog.csdn.net/qq_35071164/article/details/85621311\" target=\"_blank\" rel=\"noopener\">https://blog.csdn.net/qq_35071164/article/details/85621311</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"Linux下安装Nginx\"><a href=\"#Linux下安装Nginx\" class=\"headerlink\" title=\"Linux下安装Nginx\"></a>Linux下安装Nginx</h2><h3 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h3><p>官网：<a href=\"http://nginx.org/\" target=\"_blank\" rel=\"noopener\">http://nginx.org/</a><br>中文文档: <a href=\"http://www.nginx.cn/doc/\" target=\"_blank\" rel=\"noopener\">http://www.nginx.cn/doc/</a></p>\n<hr>\n<p>Nginx能干的事情很多,这里简要罗列一-些：</p>\n<ol>\n<li>可直接支持Rails和PHP的程序</li>\n<li>可作为HTTP反向代理服务器</li>\n<li>作为负载均衡服务器</li>\n<li>作为邮件代理服务器</li>\n<li>帮助实现前端动静分离</li>\n</ol>\n<h3 id=\"Nginx安装\"><a href=\"#Nginx安装\" class=\"headerlink\" title=\"Nginx安装\"></a>Nginx安装</h3><h4 id=\"Nginx下载\"><a href=\"#Nginx下载\" class=\"headerlink\" title=\"Nginx下载\"></a><strong>Nginx下载</strong></h4><p>官网下载：<a href=\"http://nginx.org/en/download.html\" target=\"_blank\" rel=\"noopener\">http://nginx.org/en/download.html</a><br>或者直接在linux执行命令：<code>wget http://nginx.org/download/nginx-1.12.2.tar.gz</code><br>这里下载的版本是1.12.2</p>\n<h4 id=\"安装步骤\"><a href=\"#安装步骤\" class=\"headerlink\" title=\"安装步骤\"></a><strong>安装步骤</strong></h4><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># 安装依赖</span></span><br><span class=\"line\">yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel</span><br><span class=\"line\"><span class=\"comment\"># 解压缩</span></span><br><span class=\"line\">tar -zxvf linux-nginx-1.12.2.tar.gz</span><br><span class=\"line\"><span class=\"built_in\">cd</span> nginx-1.12.2/</span><br><span class=\"line\"><span class=\"comment\"># 执行配置</span></span><br><span class=\"line\">./configure</span><br><span class=\"line\"><span class=\"comment\"># 编译安装(默认安装在/usr/local/nginx)</span></span><br><span class=\"line\">make</span><br><span class=\"line\">make install</span><br></pre></td></tr></table></figure>\n\n<h6 id=\"防火墙配置\"><a href=\"#防火墙配置\" class=\"headerlink\" title=\"防火墙配置\"></a>防火墙配置</h6><p>nginx默认监听80端口，如果未关闭防火墙需要配置iptables规则开放80端口(以centos6为例)。<br>编辑配置文件：<code>vim /etc/sysconfig/iptables</code><br>在文件中间添加iptables规则<br><code>-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT</code><br>重启防火墙：<code>service iptables restart</code><br>或者关闭iptables规则：<code>iptables -F && iptables -t nat -F</code></p>\n<h6 id=\"Nginx验证\"><a href=\"#Nginx验证\" class=\"headerlink\" title=\"Nginx验证\"></a>Nginx验证</h6><p>nginx主配置文件：<code>/usr/local/nginx/conf/nginx.conf</code><br>nginx日志文件：<code>/usr/local/nginx/logs/access.log</code><br>启动Nginx：<code>/usr/local/nginx/sbin/nginx</code><br>然后直接访问ip地址，比如：<a href=\"http://192.168.0.110/\" target=\"_blank\" rel=\"noopener\">http://192.168.0.110/</a>，如果能看到如下Nginx主页说明安装ok。</p>\n<h6 id=\"Nginx常用命令\"><a href=\"#Nginx常用命令\" class=\"headerlink\" title=\"Nginx常用命令\"></a>Nginx常用命令</h6><p>测试配置文件：<code>${Nginx}/sbin/nginx -t</code><br>启动命令：<code>${Nginx}/sbin/nginx</code><br>停止命令：<code>${Nginx}/sbin/nginx -s stop/quit</code><br>重启命令：<code>${Nginx}/sbin/nginx -s reload</code><br>查看进程命令：<code>ps -ef | grep nginx</code><br>平滑重启：<code>kill -HUP [Nginx主进程号(即ps命令查到的PID)]</code></p>\n<p>以上参考来自<a href=\"https://www.jianshu.com/p/9f2c162ac77c\" target=\"_blank\" rel=\"noopener\">https://www.jianshu.com/p/9f2c162ac77c</a></p>\n<h6 id=\"Linux下装多个-Nginx\"><a href=\"#Linux下装多个-Nginx\" class=\"headerlink\" title=\"Linux下装多个 Nginx\"></a>Linux下装多个 Nginx</h6><p>一般在./configure的阶段会要求通过prefix设置安装路径。<br>因此，在./configure的时候指定不同的prefix就可以安装多个nginx啦</p>\n<p>值得注意的是，安装完之后，两个nginx的监听端口要设置成不同的监听端口。否则，会有一个nginx无法启动。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">./configure --prefix=<span class=\"regexp\">/home/</span>work/nginx1 .....<span class=\"comment\">//第一个nginx的安装配置 make && make install</span></span><br><span class=\"line\">./configure --prefix=<span class=\"regexp\">/home/</span>work/nginx2 .....<span class=\"comment\">//第二个nginx的安装配置 make && make install</span></span><br><span class=\"line\">cd /home/work/nginx1/conf/nginx.conf && 修改第一个nginx的监听端口. ./home/work/nginx1/sbin/nginx</span><br><span class=\"line\">cd /home/work/nginx2/conf/nginx.conf && 修改第二个nginx的监听端口. ./home/work/nginx2/sbin/nginx</span><br></pre></td></tr></table></figure>\n\n<p>参考来自：<a href=\"https://blog.csdn.net/qq_35071164/article/details/85621311\" target=\"_blank\" rel=\"noopener\">https://blog.csdn.net/qq_35071164/article/details/85621311</a></p>\n"},{"title":"Linux下安装使用nodejs+pm2","date":"2019-10-12T01:40:48.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n[TOC]\n\n\n\n## 安装Nodejs\n\n提示：需要nodejs版本控制的需要安装nvm作为前提。\n这里演示的是固定版本的nodejs安装\n\n### 安装 wget\n\n```undefined\nsudo yum -y install wget\n```\n\n### 下载nodejs二进制包\n\n```ruby\nsudo wget https://nodejs.org/dist/v10.14.2/node-v10.14.2-linux-x64.tar.xz\n```\n\n*下载后会得到一个 node-v10.14.2-linux-x64.tar.xz 的压缩文件*\n\n### 解压\n\n```css\nsudo tar -xvJf node-v10.14.2-linux-x64.tar.xz\n```\n\n*解压后会得到一个 node-v10.14.2-linux-x64 的目录*\n\n### 移动 && 重命名\n\n```bash\ncp node-v10.14.2-linux-x64/* /usr/local/node-v10.14.2-linux-x64 \n```\n\n### 添加环境变量\n\n```sh\nsudo vim /etc/profile\n# 找到最后一行加入以下内容\nexport PATH=${PATH}:/usr/local/nodejs/bin/\n```\n\n### 建立软连接\n\n```\nln -s /usr/local/src/node-v10.14.2-linux-x64/bin/node /usr/local/bin/node\n```\n\n### 测试是否安装成功\n\n```bash\nnode -v\n# 或者\nnpm -v\n```\n\n*node -v是查看nodejs版本, npm -v 是查看npm版本*\n\n```\n\n```\n\n---\n\n## 安装PM2\n\n提示：安装pm2，这里默认你已经安装了node.js和npm\n1.安装\n\n```\nnpm install pm2 -g\n```\n\n根据安装的nodejs的路径不同每个人 PM2的安装路径不一样（它是自己找的） 需要注意自己的是什么路径。\n\n```\n/usr/local/node-v8.9.3-linux-x64/bin/pm2 -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/pm2\n/usr/local/node-v8.9.3-linux-x64/bin/pm2-dev -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/pm2-v\n/usr/local/node-v8.9.3-linux-x64/bin/pm2-docker -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/p-docker\n/usr/local/node-v8.9.3-linux-x64/bin/pm2-runtime -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/2-runtime\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/pm2/node_modules/fsevents):\nnpm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:“darwin”,“ch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})\n\n```\n\n2 创建软连接\n\n操作描述：在linux上的设置软连接相当于是windows下的配制环境变量一个道理，只是这里用了命令完成的操作。这里我们就开始为pm2创建软连接，这里首先要明确的是，我们要知道谁和谁去连接，问题来了？知道是哪个和哪个连接吗？好了，答案是：我们的linux下的全局$PATH和我们pm2的安装路径。那么我们如何知道他们的路径分别是哪里呢？\n参考摘自：https://blog.csdn.net/qq_36772866/article/details/88689422\n\n 1）全局path路径\n\n```\n echo $PATH\n```\n\n回车后…\n\n```\n/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin\n```\n\n说明，也话你的路径和我的不一样，但没关系，你可以选择任何一个以：隔开的路径做为系统环境路径，我通常会选/usr/local/bin\n\n通常我们在安装pm2的时间会有一个安装路径显示，如下代码于是，这就是你的pm2的安装路径为：/usr/local/node-v8.9.3-linux-x64/bin/pm2\n\n2）建立软连接\n\n\n\n`\n\n```\nln` `-s /usr/local/node-v8.9.3-linux-x64/bin/pm2 /usr/local/bin/ \n前一个为pm2安装目录\n```\n\n3.确认是否安装成功 \n\n```\npm2 list\n```\n\n---\n\n\n\n## 使用PM2运行nodejs项目\n\n在开发模式的时候，我们常用`nodemon`和`webpack`热更新nodejs项目（如express）和前端项目（如vue），但需要部署的时候我们就不能再用开发环境的配置了，需要改成生产环境配置。为了使得项目可以稳健的运行在服务端，node可以使用nohup启动，前端项目可以使用nginx代理。\n但是为了更加规范管理，我们应该使用pm2来管理node项目。\n\n#### 1.在项目中添加processes.json文件\n\n```\n{\n \"apps\": {\n \"name\": \"myapp\",\n \"script\": \"bin/www\",\n \"env\": {\n \"NODE_ENV\": \"production\"\n \"port\":\"3000\"\n }\n }\n}\n```\n\n关于端口 需要看自己项目怎么配置的，我是写死的3000 （/bin/www里 var port = normalizePort('3000');）\n\n#### 2.修改package.json里的命令\n\n```\n \"scripts\": {\n \"start\": \"pm2 start processes.json\",\n },\n```\n\n#### 3.向Linux传入项目文件 放在任意位置如 /www/myapp\n\ncd到myapp 执行\n\n```\npm2 start app.js或者processes\n```\n\n#### 4. pm2 list 查看是否已经运行 如果运行了 查看端口3000是否在线\n\n```\nnetstat -nlp 查看当前所有端口\n```\n\n如果发现3000端口不存在，但pm2 list又在线那么 大概率是软连接配错了，需要 删除当前的pm2对应的软连接 重新配 慢慢搞 我在这儿卡了很久因为没有一条龙的文档让我看，都是各个博客综合来弄的 大家的东西不够统一。\n\n#### 5.大功告成\n\n","source":"_posts/Linux下安装使用nodjs+pm2.md","raw":"---\ntitle: Linux下安装使用nodejs+pm2\ndate: 2019-10-12 09:40:48\ntags:\n - 工具\n - 服務器\ncomments: true\ncategories: 建站\n\nupdated: 2019-10-07 22:27:55\n---\n\n[TOC]\n\n\n\n## 安装Nodejs\n\n提示：需要nodejs版本控制的需要安装nvm作为前提。\n这里演示的是固定版本的nodejs安装\n\n### 安装 wget\n\n```undefined\nsudo yum -y install wget\n```\n\n### 下载nodejs二进制包\n\n```ruby\nsudo wget https://nodejs.org/dist/v10.14.2/node-v10.14.2-linux-x64.tar.xz\n```\n\n*下载后会得到一个 node-v10.14.2-linux-x64.tar.xz 的压缩文件*\n\n### 解压\n\n```css\nsudo tar -xvJf node-v10.14.2-linux-x64.tar.xz\n```\n\n*解压后会得到一个 node-v10.14.2-linux-x64 的目录*\n\n### 移动 && 重命名\n\n```bash\ncp node-v10.14.2-linux-x64/* /usr/local/node-v10.14.2-linux-x64 \n```\n\n### 添加环境变量\n\n```sh\nsudo vim /etc/profile\n# 找到最后一行加入以下内容\nexport PATH=${PATH}:/usr/local/nodejs/bin/\n```\n\n### 建立软连接\n\n```\nln -s /usr/local/src/node-v10.14.2-linux-x64/bin/node /usr/local/bin/node\n```\n\n### 测试是否安装成功\n\n```bash\nnode -v\n# 或者\nnpm -v\n```\n\n*node -v是查看nodejs版本, npm -v 是查看npm版本*\n\n```\n\n```\n\n---\n\n## 安装PM2\n\n提示：安装pm2，这里默认你已经安装了node.js和npm\n1.安装\n\n```\nnpm install pm2 -g\n```\n\n根据安装的nodejs的路径不同每个人 PM2的安装路径不一样（它是自己找的） 需要注意自己的是什么路径。\n\n```\n/usr/local/node-v8.9.3-linux-x64/bin/pm2 -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/pm2\n/usr/local/node-v8.9.3-linux-x64/bin/pm2-dev -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/pm2-v\n/usr/local/node-v8.9.3-linux-x64/bin/pm2-docker -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/p-docker\n/usr/local/node-v8.9.3-linux-x64/bin/pm2-runtime -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/2-runtime\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/pm2/node_modules/fsevents):\nnpm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:“darwin”,“ch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})\n\n```\n\n2 创建软连接\n\n操作描述：在linux上的设置软连接相当于是windows下的配制环境变量一个道理，只是这里用了命令完成的操作。这里我们就开始为pm2创建软连接，这里首先要明确的是，我们要知道谁和谁去连接，问题来了？知道是哪个和哪个连接吗？好了，答案是：我们的linux下的全局$PATH和我们pm2的安装路径。那么我们如何知道他们的路径分别是哪里呢？\n参考摘自：https://blog.csdn.net/qq_36772866/article/details/88689422\n\n 1）全局path路径\n\n```\n echo $PATH\n```\n\n回车后…\n\n```\n/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin\n```\n\n说明，也话你的路径和我的不一样，但没关系，你可以选择任何一个以：隔开的路径做为系统环境路径，我通常会选/usr/local/bin\n\n通常我们在安装pm2的时间会有一个安装路径显示，如下代码于是，这就是你的pm2的安装路径为：/usr/local/node-v8.9.3-linux-x64/bin/pm2\n\n2）建立软连接\n\n\n\n`\n\n```\nln` `-s /usr/local/node-v8.9.3-linux-x64/bin/pm2 /usr/local/bin/ \n前一个为pm2安装目录\n```\n\n3.确认是否安装成功 \n\n```\npm2 list\n```\n\n---\n\n\n\n## 使用PM2运行nodejs项目\n\n在开发模式的时候，我们常用`nodemon`和`webpack`热更新nodejs项目（如express）和前端项目（如vue），但需要部署的时候我们就不能再用开发环境的配置了，需要改成生产环境配置。为了使得项目可以稳健的运行在服务端，node可以使用nohup启动，前端项目可以使用nginx代理。\n但是为了更加规范管理，我们应该使用pm2来管理node项目。\n\n#### 1.在项目中添加processes.json文件\n\n```\n{\n \"apps\": {\n \"name\": \"myapp\",\n \"script\": \"bin/www\",\n \"env\": {\n \"NODE_ENV\": \"production\"\n \"port\":\"3000\"\n }\n }\n}\n```\n\n关于端口 需要看自己项目怎么配置的，我是写死的3000 （/bin/www里 var port = normalizePort('3000');）\n\n#### 2.修改package.json里的命令\n\n```\n \"scripts\": {\n \"start\": \"pm2 start processes.json\",\n },\n```\n\n#### 3.向Linux传入项目文件 放在任意位置如 /www/myapp\n\ncd到myapp 执行\n\n```\npm2 start app.js或者processes\n```\n\n#### 4. pm2 list 查看是否已经运行 如果运行了 查看端口3000是否在线\n\n```\nnetstat -nlp 查看当前所有端口\n```\n\n如果发现3000端口不存在，但pm2 list又在线那么 大概率是软连接配错了，需要 删除当前的pm2对应的软连接 重新配 慢慢搞 我在这儿卡了很久因为没有一条龙的文档让我看，都是各个博客综合来弄的 大家的东西不够统一。\n\n#### 5.大功告成\n\n","slug":"Linux下安装使用nodjs+pm2","published":1,"_id":"ck1rmxoak0005kwtjr87vwa4f","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"安装Nodejs\"><a href=\"#安装Nodejs\" class=\"headerlink\" title=\"安装Nodejs\"></a>安装Nodejs</h2><p>提示：需要nodejs版本控制的需要安装nvm作为前提。<br>这里演示的是固定版本的nodejs安装</p>\n<h3 id=\"安装-wget\"><a href=\"#安装-wget\" class=\"headerlink\" title=\"安装 wget\"></a>安装 wget</h3><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">sudo yum -y install wget</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"下载nodejs二进制包\"><a href=\"#下载nodejs二进制包\" class=\"headerlink\" title=\"下载nodejs二进制包\"></a>下载nodejs二进制包</h3><figure class=\"highlight ruby\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">sudo wget <span class=\"symbol\">https:</span>/<span class=\"regexp\">/nodejs.org/dist</span><span class=\"regexp\">/v10.14.2/node</span>-v1<span class=\"number\">0</span>.<span class=\"number\">14.2</span>-linux-x64.tar.xz</span><br></pre></td></tr></table></figure>\n\n<p><em>下载后会得到一个 node-v10.14.2-linux-x64.tar.xz 的压缩文件</em></p>\n<h3 id=\"解压\"><a href=\"#解压\" class=\"headerlink\" title=\"解压\"></a>解压</h3><figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">sudo</span> <span class=\"selector-tag\">tar</span> <span class=\"selector-tag\">-xvJf</span> <span class=\"selector-tag\">node-v10</span><span class=\"selector-class\">.14</span><span class=\"selector-class\">.2-linux-x64</span><span class=\"selector-class\">.tar</span><span class=\"selector-class\">.xz</span></span><br></pre></td></tr></table></figure>\n\n<p><em>解压后会得到一个 node-v10.14.2-linux-x64 的目录</em></p>\n<h3 id=\"移动-amp-amp-重命名\"><a href=\"#移动-amp-amp-重命名\" class=\"headerlink\" title=\"移动 && 重命名\"></a>移动 && 重命名</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">cp node-v10.14.2-linux-x64/* /usr/<span class=\"built_in\">local</span>/node-v10.14.2-linux-x64</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"添加环境变量\"><a href=\"#添加环境变量\" class=\"headerlink\" title=\"添加环境变量\"></a>添加环境变量</h3><figure class=\"highlight sh\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">sudo vim /etc/profile</span><br><span class=\"line\"><span class=\"comment\"># 找到最后一行加入以下内容</span></span><br><span class=\"line\"><span class=\"built_in\">export</span> PATH=<span class=\"variable\">${PATH}</span>:/usr/<span class=\"built_in\">local</span>/nodejs/bin/</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"建立软连接\"><a href=\"#建立软连接\" class=\"headerlink\" title=\"建立软连接\"></a>建立软连接</h3><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">ln -s /usr/local/src/node-v10.14.2-linux-x64/bin/node /usr/local/bin/node</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"测试是否安装成功\"><a href=\"#测试是否安装成功\" class=\"headerlink\" title=\"测试是否安装成功\"></a>测试是否安装成功</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">node -v</span><br><span class=\"line\"><span class=\"comment\"># 或者</span></span><br><span class=\"line\">npm -v</span><br></pre></td></tr></table></figure>\n\n<p><em>node -v是查看nodejs版本, npm -v 是查看npm版本</em></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"></span><br><span class=\"line\"></span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"安装PM2\"><a href=\"#安装PM2\" class=\"headerlink\" title=\"安装PM2\"></a>安装PM2</h2><p>提示：安装pm2，这里默认你已经安装了node.js和npm<br>1.安装</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install pm2 -g</span><br></pre></td></tr></table></figure>\n\n<p>根据安装的nodejs的路径不同每个人 PM2的安装路径不一样（它是自己找的） 需要注意自己的是什么路径。</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">/usr/local/node-v8.9.3-linux-x64/bin/pm2 -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/pm2</span><br><span class=\"line\">/usr/local/node-v8.9.3-linux-x64/bin/pm2-dev -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/pm2-v</span><br><span class=\"line\">/usr/local/node-v8.9.3-linux-x64/bin/pm2-docker -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/p-docker</span><br><span class=\"line\">/usr/local/node-v8.9.3-linux-x64/bin/pm2-runtime -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/2-runtime</span><br><span class=\"line\">npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/pm2/node_modules/fsevents):</span><br><span class=\"line\">npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:“darwin”,“ch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})</span><br></pre></td></tr></table></figure>\n\n<p>2 创建软连接</p>\n<p>操作描述：在linux上的设置软连接相当于是windows下的配制环境变量一个道理，只是这里用了命令完成的操作。这里我们就开始为pm2创建软连接，这里首先要明确的是，我们要知道谁和谁去连接，问题来了？知道是哪个和哪个连接吗？好了，答案是：我们的linux下的全局$PATH和我们pm2的安装路径。那么我们如何知道他们的路径分别是哪里呢？<br>参考摘自：<a href=\"https://blog.csdn.net/qq_36772866/article/details/88689422\" target=\"_blank\" rel=\"noopener\">https://blog.csdn.net/qq_36772866/article/details/88689422</a></p>\n<p> 1）全局path路径</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">echo $PATH</span><br></pre></td></tr></table></figure>\n\n<p>回车后…</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin</span><br></pre></td></tr></table></figure>\n\n<p>说明，也话你的路径和我的不一样，但没关系，你可以选择任何一个以：隔开的路径做为系统环境路径，我通常会选/usr/local/bin</p>\n<p>通常我们在安装pm2的时间会有一个安装路径显示，如下代码于是，这就是你的pm2的安装路径为：/usr/local/node-v8.9.3-linux-x64/bin/pm2</p>\n<p>2）建立软连接</p>\n<p>`</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">ln` `-s /usr/local/node-v8.9.3-linux-x64/bin/pm2 /usr/local/bin/ </span><br><span class=\"line\">前一个为pm2安装目录</span><br></pre></td></tr></table></figure>\n\n<p>3.确认是否安装成功 </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pm2 list</span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"使用PM2运行nodejs项目\"><a href=\"#使用PM2运行nodejs项目\" class=\"headerlink\" title=\"使用PM2运行nodejs项目\"></a>使用PM2运行nodejs项目</h2><p>在开发模式的时候，我们常用<code>nodemon</code>和<code>webpack</code>热更新nodejs项目（如express）和前端项目（如vue），但需要部署的时候我们就不能再用开发环境的配置了，需要改成生产环境配置。为了使得项目可以稳健的运行在服务端，node可以使用nohup启动，前端项目可以使用nginx代理。<br>但是为了更加规范管理，我们应该使用pm2来管理node项目。</p>\n<h4 id=\"1-在项目中添加processes-json文件\"><a href=\"#1-在项目中添加processes-json文件\" class=\"headerlink\" title=\"1.在项目中添加processes.json文件\"></a>1.在项目中添加processes.json文件</h4><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">{</span><br><span class=\"line\"> "apps": {</span><br><span class=\"line\"> "name": "myapp",</span><br><span class=\"line\"> "script": "bin/www",</span><br><span class=\"line\"> "env": {</span><br><span class=\"line\"> "NODE_ENV": "production"</span><br><span class=\"line\"> "port":"3000"</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>关于端口 需要看自己项目怎么配置的，我是写死的3000 （/bin/www里 var port = normalizePort(‘3000’);）</p>\n<h4 id=\"2-修改package-json里的命令\"><a href=\"#2-修改package-json里的命令\" class=\"headerlink\" title=\"2.修改package.json里的命令\"></a>2.修改package.json里的命令</h4><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">"scripts": {</span><br><span class=\"line\"> "start": "pm2 start processes.json",</span><br><span class=\"line\"> },</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"3-向Linux传入项目文件-放在任意位置如-www-myapp\"><a href=\"#3-向Linux传入项目文件-放在任意位置如-www-myapp\" class=\"headerlink\" title=\"3.向Linux传入项目文件 放在任意位置如 /www/myapp\"></a>3.向Linux传入项目文件 放在任意位置如 /www/myapp</h4><p>cd到myapp 执行</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pm2 start app.js或者processes</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"4-pm2-list-查看是否已经运行-如果运行了-查看端口3000是否在线\"><a href=\"#4-pm2-list-查看是否已经运行-如果运行了-查看端口3000是否在线\" class=\"headerlink\" title=\"4. pm2 list 查看是否已经运行 如果运行了 查看端口3000是否在线\"></a>4. pm2 list 查看是否已经运行 如果运行了 查看端口3000是否在线</h4><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">netstat -nlp 查看当前所有端口</span><br></pre></td></tr></table></figure>\n\n<p>如果发现3000端口不存在，但pm2 list又在线那么 大概率是软连接配错了，需要 删除当前的pm2对应的软连接 重新配 慢慢搞 我在这儿卡了很久因为没有一条龙的文档让我看，都是各个博客综合来弄的 大家的东西不够统一。</p>\n<h4 id=\"5-大功告成\"><a href=\"#5-大功告成\" class=\"headerlink\" title=\"5.大功告成\"></a>5.大功告成</h4>","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"安装Nodejs\"><a href=\"#安装Nodejs\" class=\"headerlink\" title=\"安装Nodejs\"></a>安装Nodejs</h2><p>提示：需要nodejs版本控制的需要安装nvm作为前提。<br>这里演示的是固定版本的nodejs安装</p>\n<h3 id=\"安装-wget\"><a href=\"#安装-wget\" class=\"headerlink\" title=\"安装 wget\"></a>安装 wget</h3><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">sudo yum -y install wget</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"下载nodejs二进制包\"><a href=\"#下载nodejs二进制包\" class=\"headerlink\" title=\"下载nodejs二进制包\"></a>下载nodejs二进制包</h3><figure class=\"highlight ruby\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">sudo wget <span class=\"symbol\">https:</span>/<span class=\"regexp\">/nodejs.org/dist</span><span class=\"regexp\">/v10.14.2/node</span>-v1<span class=\"number\">0</span>.<span class=\"number\">14.2</span>-linux-x64.tar.xz</span><br></pre></td></tr></table></figure>\n\n<p><em>下载后会得到一个 node-v10.14.2-linux-x64.tar.xz 的压缩文件</em></p>\n<h3 id=\"解压\"><a href=\"#解压\" class=\"headerlink\" title=\"解压\"></a>解压</h3><figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">sudo</span> <span class=\"selector-tag\">tar</span> <span class=\"selector-tag\">-xvJf</span> <span class=\"selector-tag\">node-v10</span><span class=\"selector-class\">.14</span><span class=\"selector-class\">.2-linux-x64</span><span class=\"selector-class\">.tar</span><span class=\"selector-class\">.xz</span></span><br></pre></td></tr></table></figure>\n\n<p><em>解压后会得到一个 node-v10.14.2-linux-x64 的目录</em></p>\n<h3 id=\"移动-amp-amp-重命名\"><a href=\"#移动-amp-amp-重命名\" class=\"headerlink\" title=\"移动 && 重命名\"></a>移动 && 重命名</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">cp node-v10.14.2-linux-x64/* /usr/<span class=\"built_in\">local</span>/node-v10.14.2-linux-x64</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"添加环境变量\"><a href=\"#添加环境变量\" class=\"headerlink\" title=\"添加环境变量\"></a>添加环境变量</h3><figure class=\"highlight sh\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">sudo vim /etc/profile</span><br><span class=\"line\"><span class=\"comment\"># 找到最后一行加入以下内容</span></span><br><span class=\"line\"><span class=\"built_in\">export</span> PATH=<span class=\"variable\">${PATH}</span>:/usr/<span class=\"built_in\">local</span>/nodejs/bin/</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"建立软连接\"><a href=\"#建立软连接\" class=\"headerlink\" title=\"建立软连接\"></a>建立软连接</h3><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">ln -s /usr/local/src/node-v10.14.2-linux-x64/bin/node /usr/local/bin/node</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"测试是否安装成功\"><a href=\"#测试是否安装成功\" class=\"headerlink\" title=\"测试是否安装成功\"></a>测试是否安装成功</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">node -v</span><br><span class=\"line\"><span class=\"comment\"># 或者</span></span><br><span class=\"line\">npm -v</span><br></pre></td></tr></table></figure>\n\n<p><em>node -v是查看nodejs版本, npm -v 是查看npm版本</em></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"></span><br><span class=\"line\"></span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"安装PM2\"><a href=\"#安装PM2\" class=\"headerlink\" title=\"安装PM2\"></a>安装PM2</h2><p>提示：安装pm2，这里默认你已经安装了node.js和npm<br>1.安装</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install pm2 -g</span><br></pre></td></tr></table></figure>\n\n<p>根据安装的nodejs的路径不同每个人 PM2的安装路径不一样（它是自己找的） 需要注意自己的是什么路径。</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">/usr/local/node-v8.9.3-linux-x64/bin/pm2 -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/pm2</span><br><span class=\"line\">/usr/local/node-v8.9.3-linux-x64/bin/pm2-dev -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/pm2-v</span><br><span class=\"line\">/usr/local/node-v8.9.3-linux-x64/bin/pm2-docker -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/p-docker</span><br><span class=\"line\">/usr/local/node-v8.9.3-linux-x64/bin/pm2-runtime -> /usr/local/node-v8.9.3-linux-x64/lib/node_modules/pm2/bin/2-runtime</span><br><span class=\"line\">npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/pm2/node_modules/fsevents):</span><br><span class=\"line\">npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:“darwin”,“ch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})</span><br></pre></td></tr></table></figure>\n\n<p>2 创建软连接</p>\n<p>操作描述：在linux上的设置软连接相当于是windows下的配制环境变量一个道理，只是这里用了命令完成的操作。这里我们就开始为pm2创建软连接，这里首先要明确的是，我们要知道谁和谁去连接，问题来了？知道是哪个和哪个连接吗？好了，答案是：我们的linux下的全局$PATH和我们pm2的安装路径。那么我们如何知道他们的路径分别是哪里呢？<br>参考摘自：<a href=\"https://blog.csdn.net/qq_36772866/article/details/88689422\" target=\"_blank\" rel=\"noopener\">https://blog.csdn.net/qq_36772866/article/details/88689422</a></p>\n<p> 1）全局path路径</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">echo $PATH</span><br></pre></td></tr></table></figure>\n\n<p>回车后…</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin</span><br></pre></td></tr></table></figure>\n\n<p>说明，也话你的路径和我的不一样，但没关系，你可以选择任何一个以：隔开的路径做为系统环境路径，我通常会选/usr/local/bin</p>\n<p>通常我们在安装pm2的时间会有一个安装路径显示，如下代码于是，这就是你的pm2的安装路径为：/usr/local/node-v8.9.3-linux-x64/bin/pm2</p>\n<p>2）建立软连接</p>\n<p>`</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">ln` `-s /usr/local/node-v8.9.3-linux-x64/bin/pm2 /usr/local/bin/ </span><br><span class=\"line\">前一个为pm2安装目录</span><br></pre></td></tr></table></figure>\n\n<p>3.确认是否安装成功 </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pm2 list</span><br></pre></td></tr></table></figure>\n\n<hr>\n<h2 id=\"使用PM2运行nodejs项目\"><a href=\"#使用PM2运行nodejs项目\" class=\"headerlink\" title=\"使用PM2运行nodejs项目\"></a>使用PM2运行nodejs项目</h2><p>在开发模式的时候，我们常用<code>nodemon</code>和<code>webpack</code>热更新nodejs项目（如express）和前端项目（如vue），但需要部署的时候我们就不能再用开发环境的配置了，需要改成生产环境配置。为了使得项目可以稳健的运行在服务端，node可以使用nohup启动，前端项目可以使用nginx代理。<br>但是为了更加规范管理，我们应该使用pm2来管理node项目。</p>\n<h4 id=\"1-在项目中添加processes-json文件\"><a href=\"#1-在项目中添加processes-json文件\" class=\"headerlink\" title=\"1.在项目中添加processes.json文件\"></a>1.在项目中添加processes.json文件</h4><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">{</span><br><span class=\"line\"> "apps": {</span><br><span class=\"line\"> "name": "myapp",</span><br><span class=\"line\"> "script": "bin/www",</span><br><span class=\"line\"> "env": {</span><br><span class=\"line\"> "NODE_ENV": "production"</span><br><span class=\"line\"> "port":"3000"</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>关于端口 需要看自己项目怎么配置的，我是写死的3000 （/bin/www里 var port = normalizePort(‘3000’);）</p>\n<h4 id=\"2-修改package-json里的命令\"><a href=\"#2-修改package-json里的命令\" class=\"headerlink\" title=\"2.修改package.json里的命令\"></a>2.修改package.json里的命令</h4><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">"scripts": {</span><br><span class=\"line\"> "start": "pm2 start processes.json",</span><br><span class=\"line\"> },</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"3-向Linux传入项目文件-放在任意位置如-www-myapp\"><a href=\"#3-向Linux传入项目文件-放在任意位置如-www-myapp\" class=\"headerlink\" title=\"3.向Linux传入项目文件 放在任意位置如 /www/myapp\"></a>3.向Linux传入项目文件 放在任意位置如 /www/myapp</h4><p>cd到myapp 执行</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pm2 start app.js或者processes</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"4-pm2-list-查看是否已经运行-如果运行了-查看端口3000是否在线\"><a href=\"#4-pm2-list-查看是否已经运行-如果运行了-查看端口3000是否在线\" class=\"headerlink\" title=\"4. pm2 list 查看是否已经运行 如果运行了 查看端口3000是否在线\"></a>4. pm2 list 查看是否已经运行 如果运行了 查看端口3000是否在线</h4><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">netstat -nlp 查看当前所有端口</span><br></pre></td></tr></table></figure>\n\n<p>如果发现3000端口不存在，但pm2 list又在线那么 大概率是软连接配错了，需要 删除当前的pm2对应的软连接 重新配 慢慢搞 我在这儿卡了很久因为没有一条龙的文档让我看，都是各个博客综合来弄的 大家的东西不够统一。</p>\n<h4 id=\"5-大功告成\"><a href=\"#5-大功告成\" class=\"headerlink\" title=\"5.大功告成\"></a>5.大功告成</h4>"},{"title":"Linux下安装mysql和走过的坑","date":"2019-10-08T16:47:11.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n[TOC]\n\n\n\n## 安装\n\n实际上大部分服务器都自带mysql的 除非你想装一从0从开始的干净LINUX\n\n\n\n```\n#wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz\n```\n\n\n\n--解压压缩包\n\n\\#tar -xzvf /root/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz\n\n--移动并修改文件名\n\n\\#mv /root/mysql-5.7.17-linux-glibc2.5-x86_64 /usr/local/mysql\n\n### 此处省略登陆 密码设置 等事项直接奔 \n\n## 踩过的坑\n\n### 1.如何让外网可以访问/使用 这台服务器上的mysql\n\n用mysql -uroot -p 登陆mysql，然后采用以下方法开启远程访问权限：\n\n```\nmysql>use mysql;\nmysql>update user set host = '%' where user = 'root';\n（%代表所有IP都可以访问过来，也可以换成指定的IP\nmysql>FLUSH RIVILEGES；（完成/刷新\n```\n\n**设置mysql的配置文件** /etc/mysql/my.cnf\n 找到 bind-address =127.0.0.1 将其修改为：\n\n \n\n```\n bind-address =0.0.0.0\n```\n\n\n 重启mysql：/etc/init.d/mysql restart;\n\n坑来啦：发现外网还是不能访问\n\n```\n\nmysql>use mysql\nmysql>select host, user from user;\n查询当前用户又哪些，发现root又好几个对应的host 这是不行滴（至少我实验的结果是这样）\n所以自己再创个用户吧 用这个用户提供给外部访问\n\nmysql>update user set host = '%' where user = 'rootNew';\nmysql>FLUSH RIVILEGES；（完成/刷新\n```\n\n\n\n## 常用的命令\n\n补充：\n\n--退出mysql命令窗口\n\n\\#exit\n\n --查看mysql状态\n\n\\#service mysql status\n\n--停止mysql\n\n\\#service mysql stop\n\n--启动mysql\n\n\\#service mysql start","source":"_posts/Linux-mysql.md","raw":"---\ntitle: Linux下安装mysql和走过的坑\ndate: 2019-10-09 00:47:11\ntags:\n - 工具\n - 数据库\ncomments: true\ncategories: 数据\n\nupdated: 2019-10-07 22:27:55\n---\n\n[TOC]\n\n\n\n## 安装\n\n实际上大部分服务器都自带mysql的 除非你想装一从0从开始的干净LINUX\n\n\n\n```\n#wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz\n```\n\n\n\n--解压压缩包\n\n\\#tar -xzvf /root/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz\n\n--移动并修改文件名\n\n\\#mv /root/mysql-5.7.17-linux-glibc2.5-x86_64 /usr/local/mysql\n\n### 此处省略登陆 密码设置 等事项直接奔 \n\n## 踩过的坑\n\n### 1.如何让外网可以访问/使用 这台服务器上的mysql\n\n用mysql -uroot -p 登陆mysql，然后采用以下方法开启远程访问权限：\n\n```\nmysql>use mysql;\nmysql>update user set host = '%' where user = 'root';\n（%代表所有IP都可以访问过来，也可以换成指定的IP\nmysql>FLUSH RIVILEGES；（完成/刷新\n```\n\n**设置mysql的配置文件** /etc/mysql/my.cnf\n 找到 bind-address =127.0.0.1 将其修改为：\n\n \n\n```\n bind-address =0.0.0.0\n```\n\n\n 重启mysql：/etc/init.d/mysql restart;\n\n坑来啦：发现外网还是不能访问\n\n```\n\nmysql>use mysql\nmysql>select host, user from user;\n查询当前用户又哪些，发现root又好几个对应的host 这是不行滴（至少我实验的结果是这样）\n所以自己再创个用户吧 用这个用户提供给外部访问\n\nmysql>update user set host = '%' where user = 'rootNew';\nmysql>FLUSH RIVILEGES；（完成/刷新\n```\n\n\n\n## 常用的命令\n\n补充：\n\n--退出mysql命令窗口\n\n\\#exit\n\n --查看mysql状态\n\n\\#service mysql status\n\n--停止mysql\n\n\\#service mysql stop\n\n--启动mysql\n\n\\#service mysql start","slug":"Linux-mysql","published":1,"_id":"ck1rp4ddl000ekwtjx4ohpybx","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><p>实际上大部分服务器都自带mysql的 除非你想装一从0从开始的干净LINUX</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">#wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz</span><br></pre></td></tr></table></figure>\n\n<p>–解压压缩包</p>\n<p>#tar -xzvf /root/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz</p>\n<p>–移动并修改文件名</p>\n<p>#mv /root/mysql-5.7.17-linux-glibc2.5-x86_64 /usr/local/mysql</p>\n<h3 id=\"此处省略登陆-密码设置-等事项直接奔\"><a href=\"#此处省略登陆-密码设置-等事项直接奔\" class=\"headerlink\" title=\"此处省略登陆 密码设置 等事项直接奔\"></a>此处省略登陆 密码设置 等事项直接奔</h3><h2 id=\"踩过的坑\"><a href=\"#踩过的坑\" class=\"headerlink\" title=\"踩过的坑\"></a>踩过的坑</h2><h3 id=\"1-如何让外网可以访问-使用-这台服务器上的mysql\"><a href=\"#1-如何让外网可以访问-使用-这台服务器上的mysql\" class=\"headerlink\" title=\"1.如何让外网可以访问/使用 这台服务器上的mysql\"></a>1.如何让外网可以访问/使用 这台服务器上的mysql</h3><p>用mysql -uroot -p 登陆mysql，然后采用以下方法开启远程访问权限：</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">mysql>use mysql;</span><br><span class=\"line\">mysql>update user set host = '%' where user = 'root';</span><br><span class=\"line\">（%代表所有IP都可以访问过来，也可以换成指定的IP</span><br><span class=\"line\">mysql>FLUSH RIVILEGES；（完成/刷新</span><br></pre></td></tr></table></figure>\n\n<p><strong>设置mysql的配置文件</strong> /etc/mysql/my.cnf<br> 找到 bind-address =127.0.0.1 将其修改为：</p>\n<p> </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"> bind-address =0.0.0.0</span><br></pre></td></tr></table></figure>\n\n<p> 重启mysql：/etc/init.d/mysql restart;</p>\n<p>坑来啦：发现外网还是不能访问</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"></span><br><span class=\"line\">mysql>use mysql</span><br><span class=\"line\">mysql>select host, user from user;</span><br><span class=\"line\">查询当前用户又哪些，发现root又好几个对应的host 这是不行滴（至少我实验的结果是这样）</span><br><span class=\"line\">所以自己再创个用户吧 用这个用户提供给外部访问</span><br><span class=\"line\"></span><br><span class=\"line\">mysql>update user set host = '%' where user = 'rootNew';</span><br><span class=\"line\">mysql>FLUSH RIVILEGES；（完成/刷新</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"常用的命令\"><a href=\"#常用的命令\" class=\"headerlink\" title=\"常用的命令\"></a>常用的命令</h2><p>补充：</p>\n<p>–退出mysql命令窗口</p>\n<p>#exit</p>\n<p> –查看mysql状态</p>\n<p>#service mysql status</p>\n<p>–停止mysql</p>\n<p>#service mysql stop</p>\n<p>–启动mysql</p>\n<p>#service mysql start</p>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><p>实际上大部分服务器都自带mysql的 除非你想装一从0从开始的干净LINUX</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">#wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz</span><br></pre></td></tr></table></figure>\n\n<p>–解压压缩包</p>\n<p>#tar -xzvf /root/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz</p>\n<p>–移动并修改文件名</p>\n<p>#mv /root/mysql-5.7.17-linux-glibc2.5-x86_64 /usr/local/mysql</p>\n<h3 id=\"此处省略登陆-密码设置-等事项直接奔\"><a href=\"#此处省略登陆-密码设置-等事项直接奔\" class=\"headerlink\" title=\"此处省略登陆 密码设置 等事项直接奔\"></a>此处省略登陆 密码设置 等事项直接奔</h3><h2 id=\"踩过的坑\"><a href=\"#踩过的坑\" class=\"headerlink\" title=\"踩过的坑\"></a>踩过的坑</h2><h3 id=\"1-如何让外网可以访问-使用-这台服务器上的mysql\"><a href=\"#1-如何让外网可以访问-使用-这台服务器上的mysql\" class=\"headerlink\" title=\"1.如何让外网可以访问/使用 这台服务器上的mysql\"></a>1.如何让外网可以访问/使用 这台服务器上的mysql</h3><p>用mysql -uroot -p 登陆mysql，然后采用以下方法开启远程访问权限：</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">mysql>use mysql;</span><br><span class=\"line\">mysql>update user set host = '%' where user = 'root';</span><br><span class=\"line\">（%代表所有IP都可以访问过来，也可以换成指定的IP</span><br><span class=\"line\">mysql>FLUSH RIVILEGES；（完成/刷新</span><br></pre></td></tr></table></figure>\n\n<p><strong>设置mysql的配置文件</strong> /etc/mysql/my.cnf<br> 找到 bind-address =127.0.0.1 将其修改为：</p>\n<p> </p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"> bind-address =0.0.0.0</span><br></pre></td></tr></table></figure>\n\n<p> 重启mysql：/etc/init.d/mysql restart;</p>\n<p>坑来啦：发现外网还是不能访问</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"></span><br><span class=\"line\">mysql>use mysql</span><br><span class=\"line\">mysql>select host, user from user;</span><br><span class=\"line\">查询当前用户又哪些，发现root又好几个对应的host 这是不行滴（至少我实验的结果是这样）</span><br><span class=\"line\">所以自己再创个用户吧 用这个用户提供给外部访问</span><br><span class=\"line\"></span><br><span class=\"line\">mysql>update user set host = '%' where user = 'rootNew';</span><br><span class=\"line\">mysql>FLUSH RIVILEGES；（完成/刷新</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"常用的命令\"><a href=\"#常用的命令\" class=\"headerlink\" title=\"常用的命令\"></a>常用的命令</h2><p>补充：</p>\n<p>–退出mysql命令窗口</p>\n<p>#exit</p>\n<p> –查看mysql状态</p>\n<p>#service mysql status</p>\n<p>–停止mysql</p>\n<p>#service mysql stop</p>\n<p>–启动mysql</p>\n<p>#service mysql start</p>\n"},{"title":"VUE框架基础指令","date":"2019-07-04T14:12:23.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n[TOC]\n\n\n\n## 用过思维导图的可以直接看我的思维导图链接 \n\n非常直观 建议谷歌浏览器 edge有BUG\n\n右键拽拉，左键展开或收缩。\n\nhttp://naotu.baidu.com/file/75bb6cf4c9d17d76bbfebad1bf3008c7?token=067b7b76801d8f39\n\n## MVVM 结构展示\n\n\n\n\n\n## v-cloak v-text v-html 内容输出指令\n\n\t\n\nv-cloak解决差值标闪烁\n（即如果还未加载出msg内容 则会一致显示内容为 {{msg}} \n）\nv-cloak 属性 css设置为none就可以 只显示内容 不显示{{msg}} 了 \n\t\n\nv-html 和v-text一样会覆盖元素原本内容\n 但解决了 把标签当普通文本输出的问题 ↓\n\t分支主题\n\n## v-bind 绑定属性指令\n\n### \t简写方式\n\n\t\t\n\n冒号=v-bind+冒号\n\n\t\t在属性绑定下 可以使用数组，三元表达式等\n\n### \t使用案例\n\n\t\t\n\n分支主题\n\t\t分支主题\n\t\t分支主题\n\t\t被绑定的表达式 可以当做变量+新内容=新表达式\n\t\t分支主题\n\n## v-on 绑定事件指令\n\n\t分支主题\n\t缩写方式是 @\n\t分支主题\n\t按键事件的绑定\n\t\t \n\n\t\t绑定 回车键 触发add 方法\n可以查询马植直接调用不是内置的键\n例如F2=113 \n@keyup.113=\"add\"\nF2 触发add 方法![]()\n\t\tVUE静态调用方法自定义F2=113\n\n## v-on 事件修饰符\n\n\t\n\t\n\t\n\n## 挺麻烦的。图片我全都要重新截图再放到图床 再链接到这里 然后图床网 每小时上传的图有限制把我卡这儿了。\n\n以后再更吧，想看的伙伴直接点我的 思维导图看吧 见楼顶。\n\n\n\n\n\nprevent阻止默认行为\n\tcapture事件捕获 可以让冒泡顺序反过来触发\n\tself 实现只有点击当前元素才会触发的事件\n（能阻止当前元素下面的元素的冒泡 \n和stop不一样（全都阻止））\n\n## vm实例中获取数据或调用方法\n\n\t跑马灯 案例\n\t()=>写的方法 \nthis 指向会保持一致\n\n## \n\n## vm中实现全局变量\n\n\t分支主题\n\n## v-model 双向绑定l指令 （只能绑定表单带value属性元素的value值）\n\n\tv-bind，绑定的属性（value属性） 当在页面发生数据动态改变时，\nthis.msg获取回来的数据并不会发生改变\n\tv-model同步实现修改\n\t绑定方法 和bind不一样\n\n## v-for和key 循环 迭代指令\n\n\t数组遍历\n\t对象数组遍历\n\t对象遍历\n\t重点！KEY的唯一性 避免数据顺序错乱\n在2.2后的新版本中 所有循环必须制定key值\n\t注意：迭代\n\n## v-if v-else和v-show 指令\n\n\t用来隐藏/展示 的功能\n\nflag =true 或者 false 即 可以来控制\n\t使用v-if\n和v-else的 分别是对应相反的结果\n\n例如flag=true.\nlogin出现，register就消失\n\n## derective【自定义指令】\n\n\t全局自定义指令：实现focus聚焦\n\t\t钩子函数\n\t\t\t分支主题\n\t\t\t分支主题\n\t\t\t \n\n\t\tv-focous 自定义的\n\t\tel=这个input原生对象\n所以可以调用原生dom方法.focous()获取焦点\n\t全局自定义指令 字体颜色设置\n\t\t案例：全局 设置字体颜色\n\t\t分支主题\n\t局部自定义\n\t\tVM2里有效\n\t\t分支主题\n\t自定义简写形式\n\t\t相当于在 bind和update里都写了一份","source":"_posts/vue-collection1.md","raw":"---\ntitle: VUE框架基础指令\ndate: 2019-07-04 22:12:23\ntags:\n - VUE\n - 框架\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n[TOC]\n\n\n\n## 用过思维导图的可以直接看我的思维导图链接 \n\n非常直观 建议谷歌浏览器 edge有BUG\n\n右键拽拉，左键展开或收缩。\n\nhttp://naotu.baidu.com/file/75bb6cf4c9d17d76bbfebad1bf3008c7?token=067b7b76801d8f39\n\n## MVVM 结构展示\n\n\n\n\n\n## v-cloak v-text v-html 内容输出指令\n\n\t\n\nv-cloak解决差值标闪烁\n（即如果还未加载出msg内容 则会一致显示内容为 {{msg}} \n）\nv-cloak 属性 css设置为none就可以 只显示内容 不显示{{msg}} 了 \n\t\n\nv-html 和v-text一样会覆盖元素原本内容\n 但解决了 把标签当普通文本输出的问题 ↓\n\t分支主题\n\n## v-bind 绑定属性指令\n\n### \t简写方式\n\n\t\t\n\n冒号=v-bind+冒号\n\n\t\t在属性绑定下 可以使用数组，三元表达式等\n\n### \t使用案例\n\n\t\t\n\n分支主题\n\t\t分支主题\n\t\t分支主题\n\t\t被绑定的表达式 可以当做变量+新内容=新表达式\n\t\t分支主题\n\n## v-on 绑定事件指令\n\n\t分支主题\n\t缩写方式是 @\n\t分支主题\n\t按键事件的绑定\n\t\t \n\n\t\t绑定 回车键 触发add 方法\n可以查询马植直接调用不是内置的键\n例如F2=113 \n@keyup.113=\"add\"\nF2 触发add 方法![]()\n\t\tVUE静态调用方法自定义F2=113\n\n## v-on 事件修饰符\n\n\t\n\t\n\t\n\n## 挺麻烦的。图片我全都要重新截图再放到图床 再链接到这里 然后图床网 每小时上传的图有限制把我卡这儿了。\n\n以后再更吧，想看的伙伴直接点我的 思维导图看吧 见楼顶。\n\n\n\n\n\nprevent阻止默认行为\n\tcapture事件捕获 可以让冒泡顺序反过来触发\n\tself 实现只有点击当前元素才会触发的事件\n（能阻止当前元素下面的元素的冒泡 \n和stop不一样（全都阻止））\n\n## vm实例中获取数据或调用方法\n\n\t跑马灯 案例\n\t()=>写的方法 \nthis 指向会保持一致\n\n## \n\n## vm中实现全局变量\n\n\t分支主题\n\n## v-model 双向绑定l指令 （只能绑定表单带value属性元素的value值）\n\n\tv-bind，绑定的属性（value属性） 当在页面发生数据动态改变时，\nthis.msg获取回来的数据并不会发生改变\n\tv-model同步实现修改\n\t绑定方法 和bind不一样\n\n## v-for和key 循环 迭代指令\n\n\t数组遍历\n\t对象数组遍历\n\t对象遍历\n\t重点！KEY的唯一性 避免数据顺序错乱\n在2.2后的新版本中 所有循环必须制定key值\n\t注意：迭代\n\n## v-if v-else和v-show 指令\n\n\t用来隐藏/展示 的功能\n\nflag =true 或者 false 即 可以来控制\n\t使用v-if\n和v-else的 分别是对应相反的结果\n\n例如flag=true.\nlogin出现，register就消失\n\n## derective【自定义指令】\n\n\t全局自定义指令：实现focus聚焦\n\t\t钩子函数\n\t\t\t分支主题\n\t\t\t分支主题\n\t\t\t \n\n\t\tv-focous 自定义的\n\t\tel=这个input原生对象\n所以可以调用原生dom方法.focous()获取焦点\n\t全局自定义指令 字体颜色设置\n\t\t案例：全局 设置字体颜色\n\t\t分支主题\n\t局部自定义\n\t\tVM2里有效\n\t\t分支主题\n\t自定义简写形式\n\t\t相当于在 bind和update里都写了一份","slug":"vue-collection1","published":1,"_id":"ck1s15w9d000lkwtj9koeue0o","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"用过思维导图的可以直接看我的思维导图链接\"><a href=\"#用过思维导图的可以直接看我的思维导图链接\" class=\"headerlink\" title=\"用过思维导图的可以直接看我的思维导图链接\"></a>用过思维导图的可以直接看我的思维导图链接</h2><p>非常直观 建议谷歌浏览器 edge有BUG</p>\n<p>右键拽拉，左键展开或收缩。</p>\n<p><a href=\"http://naotu.baidu.com/file/75bb6cf4c9d17d76bbfebad1bf3008c7?token=067b7b76801d8f39\" target=\"_blank\" rel=\"noopener\">http://naotu.baidu.com/file/75bb6cf4c9d17d76bbfebad1bf3008c7?token=067b7b76801d8f39</a></p>\n<h2 id=\"MVVM-结构展示\"><a href=\"#MVVM-结构展示\" class=\"headerlink\" title=\"MVVM 结构展示\"></a>MVVM 结构展示</h2><p><img src=\"https://i.loli.net/2019/10/16/NVOaphqBFKzQDel.png\" alt></p>\n<p><img src=\"https://i.loli.net/2019/10/16/UAKynjEgZ4HckGP.png\" alt></p>\n<h2 id=\"v-cloak-v-text-v-html-内容输出指令\"><a href=\"#v-cloak-v-text-v-html-内容输出指令\" class=\"headerlink\" title=\"v-cloak v-text v-html 内容输出指令\"></a>v-cloak v-text v-html 内容输出指令</h2><p> </p>\n<p><img src=\"https://i.loli.net/2019/10/16/V7lL2NRJAfpHjx5.png\" alt>v-cloak解决差值标闪烁<br>（即如果还未加载出msg内容 则会一致显示内容为 <br>）<br>v-cloak 属性 css设置为none就可以 只显示内容 不显示 了 </p>\n<p><img src=\"https://i.loli.net/2019/10/16/tPodCgBEyhDM1zx.png\" alt>v-html 和v-text一样会覆盖元素原本内容<br> 但解决了 把标签当普通文本输出的问题 ↓<br> <img src=\"https://i.loli.net/2019/10/16/Ch1y3AUwcGg9ioq.png\" alt>分支主题</p>\n<h2 id=\"v-bind-绑定属性指令\"><a href=\"#v-bind-绑定属性指令\" class=\"headerlink\" title=\"v-bind 绑定属性指令\"></a>v-bind 绑定属性指令</h2><h3 id=\"简写方式\"><a href=\"#简写方式\" class=\"headerlink\" title=\"简写方式\"></a>简写方式</h3><p> </p>\n<p><img src=\"https://i.loli.net/2019/10/16/eyYT3ZAB71ntgHh.png\" alt>冒号=v-bind+冒号</p>\n<p> <img src=\"https://i.loli.net/2019/10/16/xiRGotZP2AQ8vTr.png\" alt> 在属性绑定下 可以使用数组，三元表达式等</p>\n<h3 id=\"使用案例\"><a href=\"#使用案例\" class=\"headerlink\" title=\"使用案例\"></a>使用案例</h3><p> </p>\n<p><img src=\"https://i.loli.net/2019/10/16/gVN9XzW3eYmHnwi.png\" alt>分支主题<br> <img src=\"https://i.loli.net/2019/10/16/7yOUEmWagrATMdZ.png\" alt>分支主题<br> <img src=\"https://i.loli.net/2019/10/16/Bfk5SgsJFGyvVtZ.png\" alt>分支主题<br> <img src=\"https://i.loli.net/2019/10/16/gc6FndCymGWMSUO.png\" alt>被绑定的表达式 可以当做变量+新内容=新表达式<br> <img src=\"https://i.loli.net/2019/10/16/ukvZUqetiaVNRKW.png\" alt>分支主题</p>\n<h2 id=\"v-on-绑定事件指令\"><a href=\"#v-on-绑定事件指令\" class=\"headerlink\" title=\"v-on 绑定事件指令\"></a>v-on 绑定事件指令</h2><p> <img src=\"https://i.loli.net/2019/10/16/tCYio7OaGlTZLm8.png\" alt>分支主题<br> 缩写方式是 @<img src=\"https://i.loli.net/2019/10/16/eE3QtAHNlF9LuTi.png\" alt><br> 分支主题<br> 按键事件的绑定<img src=\"https://i.loli.net/2019/10/16/vjUfS8ezrNnwhRg.png\" alt><br> </p>\n<pre><code>绑定 回车键 触发add 方法</code></pre><p>可以查询马植直接调用不是内置的键<br>例如F2=113<br>@keyup.113=”add”<br>F2 触发add 方法<img src=\"https://i.loli.net/2019/10/16/ZV2iYdz4p3ToLPq.png\" alt>)<img src alt><br> VUE静态调用方法自定义F2=113<img src=\"https://i.loli.net/2019/10/16/15AtxRK2pmnrbW3.png\" alt></p>\n<h2 id=\"v-on-事件修饰符\"><a href=\"#v-on-事件修饰符\" class=\"headerlink\" title=\"v-on 事件修饰符\"></a>v-on 事件修饰符</h2><p> <img src=\"https://i.loli.net/2019/10/16/X1cT4AOt9DCUhuP.png\" alt=\"分支主题\"><br> <img src=\"http://kityminder-img.gz.bcebos.com/72c85f21ca7af1fb1c93c22858328e327a785147\" alt=\"分支主题\"><br> </p>\n<h2 id=\"挺麻烦的。图片我全都要重新截图再放到图床-再链接到这里-然后图床网-每小时上传的图有限制把我卡这儿了。\"><a href=\"#挺麻烦的。图片我全都要重新截图再放到图床-再链接到这里-然后图床网-每小时上传的图有限制把我卡这儿了。\" class=\"headerlink\" title=\"挺麻烦的。图片我全都要重新截图再放到图床 再链接到这里 然后图床网 每小时上传的图有限制把我卡这儿了。\"></a>挺麻烦的。图片我全都要重新截图再放到图床 再链接到这里 然后图床网 每小时上传的图有限制把我卡这儿了。</h2><p>以后再更吧，想看的伙伴直接点我的 思维导图看吧 见楼顶。</p>\n<p>prevent阻止默认行为<br> capture事件捕获 可以让冒泡顺序反过来触发<br> self 实现只有点击当前元素才会触发的事件<br>（能阻止当前元素下面的元素的冒泡<br>和stop不一样（全都阻止））</p>\n<h2 id=\"vm实例中获取数据或调用方法\"><a href=\"#vm实例中获取数据或调用方法\" class=\"headerlink\" title=\"vm实例中获取数据或调用方法\"></a>vm实例中获取数据或调用方法</h2><p> 跑马灯 案例<br> ()=>写的方法<br>this 指向会保持一致</p>\n<h2 id><a href=\"#\" class=\"headerlink\" title></a></h2><h2 id=\"vm中实现全局变量\"><a href=\"#vm中实现全局变量\" class=\"headerlink\" title=\"vm中实现全局变量\"></a>vm中实现全局变量</h2><p> 分支主题</p>\n<h2 id=\"v-model-双向绑定l指令-（只能绑定表单带value属性元素的value值）\"><a href=\"#v-model-双向绑定l指令-（只能绑定表单带value属性元素的value值）\" class=\"headerlink\" title=\"v-model 双向绑定l指令 （只能绑定表单带value属性元素的value值）\"></a>v-model 双向绑定l指令 （只能绑定表单带value属性元素的value值）</h2><p> v-bind，绑定的属性（value属性） 当在页面发生数据动态改变时，<br>this.msg获取回来的数据并不会发生改变<br> v-model同步实现修改<br> 绑定方法 和bind不一样</p>\n<h2 id=\"v-for和key-循环-迭代指令\"><a href=\"#v-for和key-循环-迭代指令\" class=\"headerlink\" title=\"v-for和key 循环 迭代指令\"></a>v-for和key 循环 迭代指令</h2><p> 数组遍历<br> 对象数组遍历<br> 对象遍历<br> 重点！KEY的唯一性 避免数据顺序错乱<br>在2.2后的新版本中 所有循环必须制定key值<br> 注意：迭代</p>\n<h2 id=\"v-if-v-else和v-show-指令\"><a href=\"#v-if-v-else和v-show-指令\" class=\"headerlink\" title=\"v-if v-else和v-show 指令\"></a>v-if v-else和v-show 指令</h2><p> 用来隐藏/展示 的功能</p>\n<p>flag =true 或者 false 即 可以来控制<br> 使用v-if<br>和v-else的 分别是对应相反的结果</p>\n<p>例如flag=true.<br>login出现，register就消失</p>\n<h2 id=\"derective【自定义指令】\"><a href=\"#derective【自定义指令】\" class=\"headerlink\" title=\"derective【自定义指令】\"></a>derective【自定义指令】</h2><p> 全局自定义指令：实现focus聚焦<br> 钩子函数<br> 分支主题<br> 分支主题<br> </p>\n<pre><code>v-focous 自定义的\nel=这个input原生对象</code></pre><p>所以可以调用原生dom方法.focous()获取焦点<br> 全局自定义指令 字体颜色设置<br> 案例：全局 设置字体颜色<br> 分支主题<br> 局部自定义<br> VM2里有效<br> 分支主题<br> 自定义简写形式<br> 相当于在 bind和update里都写了一份</p>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"用过思维导图的可以直接看我的思维导图链接\"><a href=\"#用过思维导图的可以直接看我的思维导图链接\" class=\"headerlink\" title=\"用过思维导图的可以直接看我的思维导图链接\"></a>用过思维导图的可以直接看我的思维导图链接</h2><p>非常直观 建议谷歌浏览器 edge有BUG</p>\n<p>右键拽拉，左键展开或收缩。</p>\n<p><a href=\"http://naotu.baidu.com/file/75bb6cf4c9d17d76bbfebad1bf3008c7?token=067b7b76801d8f39\" target=\"_blank\" rel=\"noopener\">http://naotu.baidu.com/file/75bb6cf4c9d17d76bbfebad1bf3008c7?token=067b7b76801d8f39</a></p>\n<h2 id=\"MVVM-结构展示\"><a href=\"#MVVM-结构展示\" class=\"headerlink\" title=\"MVVM 结构展示\"></a>MVVM 结构展示</h2><p><img src=\"https://i.loli.net/2019/10/16/NVOaphqBFKzQDel.png\" alt></p>\n<p><img src=\"https://i.loli.net/2019/10/16/UAKynjEgZ4HckGP.png\" alt></p>\n<h2 id=\"v-cloak-v-text-v-html-内容输出指令\"><a href=\"#v-cloak-v-text-v-html-内容输出指令\" class=\"headerlink\" title=\"v-cloak v-text v-html 内容输出指令\"></a>v-cloak v-text v-html 内容输出指令</h2><p> </p>\n<p><img src=\"https://i.loli.net/2019/10/16/V7lL2NRJAfpHjx5.png\" alt>v-cloak解决差值标闪烁<br>（即如果还未加载出msg内容 则会一致显示内容为 <br>）<br>v-cloak 属性 css设置为none就可以 只显示内容 不显示 了 </p>\n<p><img src=\"https://i.loli.net/2019/10/16/tPodCgBEyhDM1zx.png\" alt>v-html 和v-text一样会覆盖元素原本内容<br> 但解决了 把标签当普通文本输出的问题 ↓<br> <img src=\"https://i.loli.net/2019/10/16/Ch1y3AUwcGg9ioq.png\" alt>分支主题</p>\n<h2 id=\"v-bind-绑定属性指令\"><a href=\"#v-bind-绑定属性指令\" class=\"headerlink\" title=\"v-bind 绑定属性指令\"></a>v-bind 绑定属性指令</h2><h3 id=\"简写方式\"><a href=\"#简写方式\" class=\"headerlink\" title=\"简写方式\"></a>简写方式</h3><p> </p>\n<p><img src=\"https://i.loli.net/2019/10/16/eyYT3ZAB71ntgHh.png\" alt>冒号=v-bind+冒号</p>\n<p> <img src=\"https://i.loli.net/2019/10/16/xiRGotZP2AQ8vTr.png\" alt> 在属性绑定下 可以使用数组，三元表达式等</p>\n<h3 id=\"使用案例\"><a href=\"#使用案例\" class=\"headerlink\" title=\"使用案例\"></a>使用案例</h3><p> </p>\n<p><img src=\"https://i.loli.net/2019/10/16/gVN9XzW3eYmHnwi.png\" alt>分支主题<br> <img src=\"https://i.loli.net/2019/10/16/7yOUEmWagrATMdZ.png\" alt>分支主题<br> <img src=\"https://i.loli.net/2019/10/16/Bfk5SgsJFGyvVtZ.png\" alt>分支主题<br> <img src=\"https://i.loli.net/2019/10/16/gc6FndCymGWMSUO.png\" alt>被绑定的表达式 可以当做变量+新内容=新表达式<br> <img src=\"https://i.loli.net/2019/10/16/ukvZUqetiaVNRKW.png\" alt>分支主题</p>\n<h2 id=\"v-on-绑定事件指令\"><a href=\"#v-on-绑定事件指令\" class=\"headerlink\" title=\"v-on 绑定事件指令\"></a>v-on 绑定事件指令</h2><p> <img src=\"https://i.loli.net/2019/10/16/tCYio7OaGlTZLm8.png\" alt>分支主题<br> 缩写方式是 @<img src=\"https://i.loli.net/2019/10/16/eE3QtAHNlF9LuTi.png\" alt><br> 分支主题<br> 按键事件的绑定<img src=\"https://i.loli.net/2019/10/16/vjUfS8ezrNnwhRg.png\" alt><br> </p>\n<pre><code>绑定 回车键 触发add 方法</code></pre><p>可以查询马植直接调用不是内置的键<br>例如F2=113<br>@keyup.113=”add”<br>F2 触发add 方法<img src=\"https://i.loli.net/2019/10/16/ZV2iYdz4p3ToLPq.png\" alt>)<img src alt><br> VUE静态调用方法自定义F2=113<img src=\"https://i.loli.net/2019/10/16/15AtxRK2pmnrbW3.png\" alt></p>\n<h2 id=\"v-on-事件修饰符\"><a href=\"#v-on-事件修饰符\" class=\"headerlink\" title=\"v-on 事件修饰符\"></a>v-on 事件修饰符</h2><p> <img src=\"https://i.loli.net/2019/10/16/X1cT4AOt9DCUhuP.png\" alt=\"分支主题\"><br> <img src=\"http://kityminder-img.gz.bcebos.com/72c85f21ca7af1fb1c93c22858328e327a785147\" alt=\"分支主题\"><br> </p>\n<h2 id=\"挺麻烦的。图片我全都要重新截图再放到图床-再链接到这里-然后图床网-每小时上传的图有限制把我卡这儿了。\"><a href=\"#挺麻烦的。图片我全都要重新截图再放到图床-再链接到这里-然后图床网-每小时上传的图有限制把我卡这儿了。\" class=\"headerlink\" title=\"挺麻烦的。图片我全都要重新截图再放到图床 再链接到这里 然后图床网 每小时上传的图有限制把我卡这儿了。\"></a>挺麻烦的。图片我全都要重新截图再放到图床 再链接到这里 然后图床网 每小时上传的图有限制把我卡这儿了。</h2><p>以后再更吧，想看的伙伴直接点我的 思维导图看吧 见楼顶。</p>\n<p>prevent阻止默认行为<br> capture事件捕获 可以让冒泡顺序反过来触发<br> self 实现只有点击当前元素才会触发的事件<br>（能阻止当前元素下面的元素的冒泡<br>和stop不一样（全都阻止））</p>\n<h2 id=\"vm实例中获取数据或调用方法\"><a href=\"#vm实例中获取数据或调用方法\" class=\"headerlink\" title=\"vm实例中获取数据或调用方法\"></a>vm实例中获取数据或调用方法</h2><p> 跑马灯 案例<br> ()=>写的方法<br>this 指向会保持一致</p>\n<h2 id><a href=\"#\" class=\"headerlink\" title></a></h2><h2 id=\"vm中实现全局变量\"><a href=\"#vm中实现全局变量\" class=\"headerlink\" title=\"vm中实现全局变量\"></a>vm中实现全局变量</h2><p> 分支主题</p>\n<h2 id=\"v-model-双向绑定l指令-（只能绑定表单带value属性元素的value值）\"><a href=\"#v-model-双向绑定l指令-（只能绑定表单带value属性元素的value值）\" class=\"headerlink\" title=\"v-model 双向绑定l指令 （只能绑定表单带value属性元素的value值）\"></a>v-model 双向绑定l指令 （只能绑定表单带value属性元素的value值）</h2><p> v-bind，绑定的属性（value属性） 当在页面发生数据动态改变时，<br>this.msg获取回来的数据并不会发生改变<br> v-model同步实现修改<br> 绑定方法 和bind不一样</p>\n<h2 id=\"v-for和key-循环-迭代指令\"><a href=\"#v-for和key-循环-迭代指令\" class=\"headerlink\" title=\"v-for和key 循环 迭代指令\"></a>v-for和key 循环 迭代指令</h2><p> 数组遍历<br> 对象数组遍历<br> 对象遍历<br> 重点！KEY的唯一性 避免数据顺序错乱<br>在2.2后的新版本中 所有循环必须制定key值<br> 注意：迭代</p>\n<h2 id=\"v-if-v-else和v-show-指令\"><a href=\"#v-if-v-else和v-show-指令\" class=\"headerlink\" title=\"v-if v-else和v-show 指令\"></a>v-if v-else和v-show 指令</h2><p> 用来隐藏/展示 的功能</p>\n<p>flag =true 或者 false 即 可以来控制<br> 使用v-if<br>和v-else的 分别是对应相反的结果</p>\n<p>例如flag=true.<br>login出现，register就消失</p>\n<h2 id=\"derective【自定义指令】\"><a href=\"#derective【自定义指令】\" class=\"headerlink\" title=\"derective【自定义指令】\"></a>derective【自定义指令】</h2><p> 全局自定义指令：实现focus聚焦<br> 钩子函数<br> 分支主题<br> 分支主题<br> </p>\n<pre><code>v-focous 自定义的\nel=这个input原生对象</code></pre><p>所以可以调用原生dom方法.focous()获取焦点<br> 全局自定义指令 字体颜色设置<br> 案例：全局 设置字体颜色<br> 分支主题<br> 局部自定义<br> VM2里有效<br> 分支主题<br> 自定义简写形式<br> 相当于在 bind和update里都写了一份</p>\n"},{"title":"VUE生命周期图解","date":"2019-07-22T11:21:09.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n## VUE生命周期图解\n\n\n\n\n\n\n\n","source":"_posts/VUE生命周期图解.md","raw":"---\ntitle: VUE生命周期图解\ndate: 2019-07-22 19:21:09\ntags:\n - VUE\n - 框架\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n## VUE生命周期图解\n\n\n\n\n\n\n\n","slug":"VUE生命周期图解","published":1,"_id":"ck1up8thu00003otjjxpcdbqs","layout":"post","photos":[],"link":"","content":"<h2 id=\"VUE生命周期图解\"><a href=\"#VUE生命周期图解\" class=\"headerlink\" title=\"VUE生命周期图解\"></a>VUE生命周期图解</h2><p><img src=\"https://i.loli.net/2019/10/16/89zRYeMx3HsAVwG.png\" alt></p>\n<p><img src=\"https://i.loli.net/2019/10/16/Ri7Emgre8OPF9Mv.png\" alt></p>\n<p><img src=\"https://i.loli.net/2019/10/16/grJYmwyIhMf54Vu.png\" alt></p>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"VUE生命周期图解\"><a href=\"#VUE生命周期图解\" class=\"headerlink\" title=\"VUE生命周期图解\"></a>VUE生命周期图解</h2><p><img src=\"https://i.loli.net/2019/10/16/89zRYeMx3HsAVwG.png\" alt></p>\n<p><img src=\"https://i.loli.net/2019/10/16/Ri7Emgre8OPF9Mv.png\" alt></p>\n<p><img src=\"https://i.loli.net/2019/10/16/grJYmwyIhMf54Vu.png\" alt></p>\n"},{"title":"CSS隐藏元素的五种方法","date":"2019-05-29T12:27:19.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n\n\n1.opacity 是设置一个元素的透明度 可用于图片透明度\n\n- opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，\n 而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。\n\n- ```\n img\n {\n opacity:0.4;\n filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */\n }\n ```\n\n \n\n2.visibility 属性值为hidden的时候，元素将会隐藏 也会占据着自己的位置\n\n- 该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，\n 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。\n 如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，\n 只要给想要显示的子元素添加visibility：visible;就可以了\n\n3.dispaly 当属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成 不占据位置\n\n- 该属性才是真正意义上的隐藏元素,当元素的display属性为none时,\n 该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,\n 不但如此,就连它的子元素也会一同从盒子模型中消失。\n 给他和它的子元素添加的任何动画效果交互效果都会不起作用。\n jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。\n\n4.Position 脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作\n\n- 该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，\n 又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），\n 达到一定的值，离开当前可使页面。\n\n5.clip-path 隐藏元素的另一种方法是通过剪裁它们实现。不让它显示出来，但是会占据位置并显示为空\n\n- ```\n .hide {\n clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);\n }\n ```\n\n ","source":"_posts/CSS隐藏元素的四种方法.md","raw":"---\ntitle: CSS隐藏元素的五种方法\ndate: 2019-05-29 20:27:19\ntags:\n - css \n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n\n\n1.opacity 是设置一个元素的透明度 可用于图片透明度\n\n- opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，\n 而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。\n\n- ```\n img\n {\n opacity:0.4;\n filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */\n }\n ```\n\n \n\n2.visibility 属性值为hidden的时候，元素将会隐藏 也会占据着自己的位置\n\n- 该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，\n 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。\n 如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，\n 只要给想要显示的子元素添加visibility：visible;就可以了\n\n3.dispaly 当属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成 不占据位置\n\n- 该属性才是真正意义上的隐藏元素,当元素的display属性为none时,\n 该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,\n 不但如此,就连它的子元素也会一同从盒子模型中消失。\n 给他和它的子元素添加的任何动画效果交互效果都会不起作用。\n jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。\n\n4.Position 脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作\n\n- 该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，\n 又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），\n 达到一定的值，离开当前可使页面。\n\n5.clip-path 隐藏元素的另一种方法是通过剪裁它们实现。不让它显示出来，但是会占据位置并显示为空\n\n- ```\n .hide {\n clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);\n }\n ```\n\n ","slug":"CSS隐藏元素的四种方法","published":1,"_id":"ck1up8ti000013otjxvxwsq0l","layout":"post","photos":[],"link":"","content":"<p>1.opacity 是设置一个元素的透明度 可用于图片透明度</p>\n<ul>\n<li><p>opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，<br>而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。</p>\n</li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">img</span><br><span class=\"line\">{</span><br><span class=\"line\">opacity:0.4;</span><br><span class=\"line\">filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n\n\n</li>\n</ul>\n<p>2.visibility 属性值为hidden的时候，元素将会隐藏 也会占据着自己的位置</p>\n<ul>\n<li>该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，<br>与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。<br>如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，<br>只要给想要显示的子元素添加visibility：visible;就可以了</li>\n</ul>\n<p>3.dispaly 当属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成 不占据位置</p>\n<ul>\n<li>该属性才是真正意义上的隐藏元素,当元素的display属性为none时,<br>该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,<br>不但如此,就连它的子元素也会一同从盒子模型中消失。<br>给他和它的子元素添加的任何动画效果交互效果都会不起作用。<br>jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。</li>\n</ul>\n<p>4.Position 脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作</p>\n<ul>\n<li>该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，<br>又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），<br>达到一定的值，离开当前可使页面。</li>\n</ul>\n<p>5.clip-path 隐藏元素的另一种方法是通过剪裁它们实现。不让它显示出来，但是会占据位置并显示为空</p>\n<ul>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">.hide {</span><br><span class=\"line\"> clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>1.opacity 是设置一个元素的透明度 可用于图片透明度</p>\n<ul>\n<li><p>opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，<br>而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。</p>\n</li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">img</span><br><span class=\"line\">{</span><br><span class=\"line\">opacity:0.4;</span><br><span class=\"line\">filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n\n\n</li>\n</ul>\n<p>2.visibility 属性值为hidden的时候，元素将会隐藏 也会占据着自己的位置</p>\n<ul>\n<li>该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，<br>与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。<br>如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，<br>只要给想要显示的子元素添加visibility：visible;就可以了</li>\n</ul>\n<p>3.dispaly 当属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成 不占据位置</p>\n<ul>\n<li>该属性才是真正意义上的隐藏元素,当元素的display属性为none时,<br>该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,<br>不但如此,就连它的子元素也会一同从盒子模型中消失。<br>给他和它的子元素添加的任何动画效果交互效果都会不起作用。<br>jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。</li>\n</ul>\n<p>4.Position 脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作</p>\n<ul>\n<li>该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，<br>又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），<br>达到一定的值，离开当前可使页面。</li>\n</ul>\n<p>5.clip-path 隐藏元素的另一种方法是通过剪裁它们实现。不让它显示出来，但是会占据位置并显示为空</p>\n<ul>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">.hide {</span><br><span class=\"line\"> clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n"},{"title":"css文本间距和文本溢出的处理","date":"2019-06-08T04:23:12.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n[TOC]\n\n\n\n# 文本间距\n\n```\nline-height: 行间距\ntext-aglin； 水平对齐方式\ntext-indent: 首行缩进\nletter-spacing: 字间距\nword-spacing: 单词间距\n```\n\n# 文本溢出的处理\n\n1. word-break:自动换行 主要处理英文单词\n - break-all\t允许在单词内换行。\n - keep-all\t只能在半角空格或连字符处换行。\n2. white-space：自动换行 可以处理中文\n - pre\t空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。\n - nowrap\t文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。\n - pre-wrap\t保留空白符序列，但是正常地进行换行。\n - pre-line\t合并空白符序列，但是保留换行符。\n - inherit\t规定应该从父元素继承 white-space 属性的值。\n3. word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分\n - \n4. text-overflow 文字溢出\n - ellipsis : 当对象内文本溢出时显示省略标记（...）\n - clip : 不显示省略标记（...），而是简单的裁切\n\n\n\n","source":"_posts/css文本间距和文本溢出的处理.md","raw":"---\ntitle: css文本间距和文本溢出的处理\ndate: 2019-06-08 12:23:12\ntags:\n - css \n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n[TOC]\n\n\n\n# 文本间距\n\n```\nline-height: 行间距\ntext-aglin； 水平对齐方式\ntext-indent: 首行缩进\nletter-spacing: 字间距\nword-spacing: 单词间距\n```\n\n# 文本溢出的处理\n\n1. word-break:自动换行 主要处理英文单词\n - break-all\t允许在单词内换行。\n - keep-all\t只能在半角空格或连字符处换行。\n2. white-space：自动换行 可以处理中文\n - pre\t空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。\n - nowrap\t文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。\n - pre-wrap\t保留空白符序列，但是正常地进行换行。\n - pre-line\t合并空白符序列，但是保留换行符。\n - inherit\t规定应该从父元素继承 white-space 属性的值。\n3. word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分\n - \n4. text-overflow 文字溢出\n - ellipsis : 当对象内文本溢出时显示省略标记（...）\n - clip : 不显示省略标记（...），而是简单的裁切\n\n\n\n","slug":"css文本间距和文本溢出的处理","published":1,"_id":"ck1up8tib00033otj1srv32uv","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h1 id=\"文本间距\"><a href=\"#文本间距\" class=\"headerlink\" title=\"文本间距\"></a>文本间距</h1><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">line-height: 行间距</span><br><span class=\"line\">text-aglin； 水平对齐方式</span><br><span class=\"line\">text-indent: 首行缩进</span><br><span class=\"line\">letter-spacing: 字间距</span><br><span class=\"line\">word-spacing: 单词间距</span><br></pre></td></tr></table></figure>\n\n<h1 id=\"文本溢出的处理\"><a href=\"#文本溢出的处理\" class=\"headerlink\" title=\"文本溢出的处理\"></a>文本溢出的处理</h1><ol>\n<li>word-break:自动换行 主要处理英文单词<ul>\n<li>break-all 允许在单词内换行。</li>\n<li>keep-all 只能在半角空格或连字符处换行。</li>\n</ul>\n</li>\n<li>white-space：自动换行 可以处理中文<ul>\n<li>pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。</li>\n<li>nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。</li>\n<li>pre-wrap 保留空白符序列，但是正常地进行换行。</li>\n<li>pre-line 合并空白符序列，但是保留换行符。</li>\n<li>inherit 规定应该从父元素继承 white-space 属性的值。</li>\n</ul>\n</li>\n<li><h2 id=\"word-wrap-（CSS3）强制文本进行换行-即使这意味着会对单词进行拆分\"><a href=\"#word-wrap-（CSS3）强制文本进行换行-即使这意味着会对单词进行拆分\" class=\"headerlink\" title=\"word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分\"></a>word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分</h2></li>\n<li>text-overflow 文字溢出<ul>\n<li>ellipsis : 当对象内文本溢出时显示省略标记（…）</li>\n<li>clip : 不显示省略标记（…），而是简单的裁切</li>\n</ul>\n</li>\n</ol>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h1 id=\"文本间距\"><a href=\"#文本间距\" class=\"headerlink\" title=\"文本间距\"></a>文本间距</h1><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">line-height: 行间距</span><br><span class=\"line\">text-aglin； 水平对齐方式</span><br><span class=\"line\">text-indent: 首行缩进</span><br><span class=\"line\">letter-spacing: 字间距</span><br><span class=\"line\">word-spacing: 单词间距</span><br></pre></td></tr></table></figure>\n\n<h1 id=\"文本溢出的处理\"><a href=\"#文本溢出的处理\" class=\"headerlink\" title=\"文本溢出的处理\"></a>文本溢出的处理</h1><ol>\n<li>word-break:自动换行 主要处理英文单词<ul>\n<li>break-all 允许在单词内换行。</li>\n<li>keep-all 只能在半角空格或连字符处换行。</li>\n</ul>\n</li>\n<li>white-space：自动换行 可以处理中文<ul>\n<li>pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。</li>\n<li>nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。</li>\n<li>pre-wrap 保留空白符序列，但是正常地进行换行。</li>\n<li>pre-line 合并空白符序列，但是保留换行符。</li>\n<li>inherit 规定应该从父元素继承 white-space 属性的值。</li>\n</ul>\n</li>\n<li><h2 id=\"word-wrap-（CSS3）强制文本进行换行-即使这意味着会对单词进行拆分\"><a href=\"#word-wrap-（CSS3）强制文本进行换行-即使这意味着会对单词进行拆分\" class=\"headerlink\" title=\"word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分\"></a>word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分</h2></li>\n<li>text-overflow 文字溢出<ul>\n<li>ellipsis : 当对象内文本溢出时显示省略标记（…）</li>\n<li>clip : 不显示省略标记（…），而是简单的裁切</li>\n</ul>\n</li>\n</ol>\n"},{"title":"vue中的动画：【transation】【transationGroup】","date":"2019-05-17T04:22:33.000Z","top":4,"comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n[TOC]\n\n\n\n\n\n\n\n## 【transation】标签包裹的单个元素都可以使用过渡类名\n\n## 【transationGroup】包裹v-for循环出来的\n\n# 全场动画\n\n1. 淡入淡出的位移案例\n\n - \n - \n\n2. ul表单位移案例（v-for）\n\n - \n - \n - \n\n - is=\"transition-group\"如果是 table表单 可以不用transitionGroup标签包裹 需要如此处理**\n - 去除transition-group标签 写到 is属性里\n name=所需的name)\n - \n - appear入场效果 使效果适用于入场\n - 当页面展示出来时。\n - \n\n - tag=\"标签名（自己想给的任意标签）\" 解决了 transition-group渲染始终为span标签问题\n\n3. 元素位移类\n\n \n\n# 半场动画\n\n钩子函数 实现单进 单出\n\n1. 生命钩子属性 示范\n\n2. 案例 实现小球掉入购物车\n - \n - \n - 进入前\n - \n - \n - 进入后+消失\n 注意重点 要写done()\n - \n\n# 修改v-前缀 实现单独控制（否则 新的transiation包裹的元素全是一样的动画）\n\n1. \n2. ","source":"_posts/vue中的动画.md","raw":"---\ntitle: vue中的动画：【transation】【transationGroup】\ndate: 2019-05-17 12:22:33\ntop: 4\ntags:\n - VUE\n - 框架\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n[TOC]\n\n\n\n\n\n\n\n## 【transation】标签包裹的单个元素都可以使用过渡类名\n\n## 【transationGroup】包裹v-for循环出来的\n\n# 全场动画\n\n1. 淡入淡出的位移案例\n\n - \n - \n\n2. ul表单位移案例（v-for）\n\n - \n - \n - \n\n - is=\"transition-group\"如果是 table表单 可以不用transitionGroup标签包裹 需要如此处理**\n - 去除transition-group标签 写到 is属性里\n name=所需的name)\n - \n - appear入场效果 使效果适用于入场\n - 当页面展示出来时。\n - \n\n - tag=\"标签名（自己想给的任意标签）\" 解决了 transition-group渲染始终为span标签问题\n\n3. 元素位移类\n\n \n\n# 半场动画\n\n钩子函数 实现单进 单出\n\n1. 生命钩子属性 示范\n\n2. 案例 实现小球掉入购物车\n - \n - \n - 进入前\n - \n - \n - 进入后+消失\n 注意重点 要写done()\n - \n\n# 修改v-前缀 实现单独控制（否则 新的transiation包裹的元素全是一样的动画）\n\n1. \n2. ","slug":"vue中的动画","published":1,"_id":"ck1up8tkl000g3otjjo92zj2c","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"【transation】标签包裹的单个元素都可以使用过渡类名\"><a href=\"#【transation】标签包裹的单个元素都可以使用过渡类名\" class=\"headerlink\" title=\"【transation】标签包裹的单个元素都可以使用过渡类名\"></a>【transation】标签包裹的单个元素都可以使用过渡类名</h2><h2 id=\"【transationGroup】包裹v-for循环出来的\"><a href=\"#【transationGroup】包裹v-for循环出来的\" class=\"headerlink\" title=\"【transationGroup】包裹v-for循环出来的\"></a>【transationGroup】包裹v-for循环出来的</h2><h1 id=\"全场动画\"><a href=\"#全场动画\" class=\"headerlink\" title=\"全场动画\"></a>全场动画</h1><ol>\n<li><p>淡入淡出的位移案例</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/Ln5hQzoWIDu6iCS.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/A3c9mKt5bLUBo1u.png\" alt></li>\n</ul>\n</li>\n<li><p>ul表单位移案例（v-for）</p>\n<ul>\n<li><p><img src=\"https://i.loli.net/2019/10/16/QIaXE4ygkBH7fzV.png\" alt></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/16/KJDdzeBNH5kVf8L.png\" alt></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/16/B8HO2Svws1ujeMc.png\" alt></p>\n</li>\n<li><p>is=”transition-group”如果是 table表单 可以不用transitionGroup标签包裹 需要如此处理**</p>\n<ul>\n<li>去除transition-group标签 写到 is属性里<br>name=所需的name<img src=\"!%5B1571235785_1_.jpg%5D(https://i.loli.net/2019/10/16/5CP79qjJguWxHOl.png)\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/NQ9kc3EaMnAj6mP.png\" alt></li>\n</ul>\n</li>\n<li><p>appear入场效果 使效果适用于入场</p>\n<ul>\n<li>当页面展示出来时。<img src=\"https://i.loli.net/2019/10/16/Jy2Zv5nBWM86qIX.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/GOYmxAXPl3VUCMg.png\" alt></li>\n</ul>\n</li>\n<li><p>tag=”标签名（自己想给的任意标签）” 解决了 transition-group渲染始终为span标签问题<img src=\"https://i.loli.net/2019/10/16/arfZSvVxwg6LnIA.png\" alt></p>\n</li>\n</ul>\n</li>\n<li><p>元素位移类<img src=\"https://i.loli.net/2019/10/16/nmu8MYLfCwpbxFP.png\" alt></p>\n</li>\n</ol>\n<h1 id=\"半场动画\"><a href=\"#半场动画\" class=\"headerlink\" title=\"半场动画\"></a>半场动画</h1><p>钩子函数 实现单进 单出</p>\n<ol>\n<li><p>生命钩子属性 示范<img src=\"https://i.loli.net/2019/10/16/8sboYrOIhgSXi7J.png\" alt></p>\n</li>\n<li><p>案例 实现小球掉入购物车</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/6GxXY9sKrkHTnSI.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/gh6i9ebH2QLdMAo.png\" alt></li>\n<li>进入前<img src=\"https://i.loli.net/2019/10/16/cCZkLmtEpS495ue.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/NfVjsw1oCFbJxYi.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/NfVjsw1oCFbJxYi.png\" alt></li>\n<li>进入后+消失<br>注意重点 要写done()<img src=\"https://i.loli.net/2019/10/16/nHrqF5XYRefdD7G.png\" alt=\"img\"></li>\n<li><img src=\"https://i.loli.net/2019/10/16/9Np5gHTq1Z7lcrK.png\" alt></li>\n</ul>\n</li>\n</ol>\n<h1 id=\"修改v-前缀-实现单独控制（否则-新的transiation包裹的元素全是一样的动画）\"><a href=\"#修改v-前缀-实现单独控制（否则-新的transiation包裹的元素全是一样的动画）\" class=\"headerlink\" title=\"修改v-前缀 实现单独控制（否则 新的transiation包裹的元素全是一样的动画）\"></a>修改v-前缀 实现单独控制（否则 新的transiation包裹的元素全是一样的动画）</h1><ol>\n<li><img src=\"https://i.loli.net/2019/10/16/1Mr3cBVoslUfi9y.png\" alt=\"1571237075_1_.jpg\"></li>\n<li><img src=\"https://i.loli.net/2019/10/16/ni3Se89vBGbsyDH.png\" alt=\"1571237083_1_.jpg\"></li>\n</ol>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"【transation】标签包裹的单个元素都可以使用过渡类名\"><a href=\"#【transation】标签包裹的单个元素都可以使用过渡类名\" class=\"headerlink\" title=\"【transation】标签包裹的单个元素都可以使用过渡类名\"></a>【transation】标签包裹的单个元素都可以使用过渡类名</h2><h2 id=\"【transationGroup】包裹v-for循环出来的\"><a href=\"#【transationGroup】包裹v-for循环出来的\" class=\"headerlink\" title=\"【transationGroup】包裹v-for循环出来的\"></a>【transationGroup】包裹v-for循环出来的</h2><h1 id=\"全场动画\"><a href=\"#全场动画\" class=\"headerlink\" title=\"全场动画\"></a>全场动画</h1><ol>\n<li><p>淡入淡出的位移案例</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/Ln5hQzoWIDu6iCS.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/A3c9mKt5bLUBo1u.png\" alt></li>\n</ul>\n</li>\n<li><p>ul表单位移案例（v-for）</p>\n<ul>\n<li><p><img src=\"https://i.loli.net/2019/10/16/QIaXE4ygkBH7fzV.png\" alt></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/16/KJDdzeBNH5kVf8L.png\" alt></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/16/B8HO2Svws1ujeMc.png\" alt></p>\n</li>\n<li><p>is=”transition-group”如果是 table表单 可以不用transitionGroup标签包裹 需要如此处理**</p>\n<ul>\n<li>去除transition-group标签 写到 is属性里<br>name=所需的name<img src=\"!%5B1571235785_1_.jpg%5D(https://i.loli.net/2019/10/16/5CP79qjJguWxHOl.png)\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/NQ9kc3EaMnAj6mP.png\" alt></li>\n</ul>\n</li>\n<li><p>appear入场效果 使效果适用于入场</p>\n<ul>\n<li>当页面展示出来时。<img src=\"https://i.loli.net/2019/10/16/Jy2Zv5nBWM86qIX.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/GOYmxAXPl3VUCMg.png\" alt></li>\n</ul>\n</li>\n<li><p>tag=”标签名（自己想给的任意标签）” 解决了 transition-group渲染始终为span标签问题<img src=\"https://i.loli.net/2019/10/16/arfZSvVxwg6LnIA.png\" alt></p>\n</li>\n</ul>\n</li>\n<li><p>元素位移类<img src=\"https://i.loli.net/2019/10/16/nmu8MYLfCwpbxFP.png\" alt></p>\n</li>\n</ol>\n<h1 id=\"半场动画\"><a href=\"#半场动画\" class=\"headerlink\" title=\"半场动画\"></a>半场动画</h1><p>钩子函数 实现单进 单出</p>\n<ol>\n<li><p>生命钩子属性 示范<img src=\"https://i.loli.net/2019/10/16/8sboYrOIhgSXi7J.png\" alt></p>\n</li>\n<li><p>案例 实现小球掉入购物车</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/6GxXY9sKrkHTnSI.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/gh6i9ebH2QLdMAo.png\" alt></li>\n<li>进入前<img src=\"https://i.loli.net/2019/10/16/cCZkLmtEpS495ue.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/NfVjsw1oCFbJxYi.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/NfVjsw1oCFbJxYi.png\" alt></li>\n<li>进入后+消失<br>注意重点 要写done()<img src=\"https://i.loli.net/2019/10/16/nHrqF5XYRefdD7G.png\" alt=\"img\"></li>\n<li><img src=\"https://i.loli.net/2019/10/16/9Np5gHTq1Z7lcrK.png\" alt></li>\n</ul>\n</li>\n</ol>\n<h1 id=\"修改v-前缀-实现单独控制（否则-新的transiation包裹的元素全是一样的动画）\"><a href=\"#修改v-前缀-实现单独控制（否则-新的transiation包裹的元素全是一样的动画）\" class=\"headerlink\" title=\"修改v-前缀 实现单独控制（否则 新的transiation包裹的元素全是一样的动画）\"></a>修改v-前缀 实现单独控制（否则 新的transiation包裹的元素全是一样的动画）</h1><ol>\n<li><img src=\"https://i.loli.net/2019/10/16/1Mr3cBVoslUfi9y.png\" alt=\"1571237075_1_.jpg\"></li>\n<li><img src=\"https://i.loli.net/2019/10/16/ni3Se89vBGbsyDH.png\" alt=\"1571237083_1_.jpg\"></li>\n</ol>\n"},{"title":"VUE项目性能优化","date":"2019-08-11T00:50:36.000Z","top":3,"comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n[TOC]\n\n\n\n# vue项目性能优化（路由懒加载、gzip加速、cdn加速）\n\n1. ## 基础优化\n\n - 不要在模板中写复杂的表达式\n\n - 慎用watch尤其是deep\n\n - 合理的使用v-if/v-show/v-for\n\n - 善用keep-alive \n\n - keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。\n - include - 字符串或正则表达，只有匹配的组件会被缓存\n exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存include/exclude里的 值必须是 组件的名，需要自己在组件里定义才生效\n - 如果只想 router-view 里面某个组件被缓存，怎么办？\n - 缓存组件 其实就是缓存 那些静态的页面的东西、不涉及动态数据\n 那么静态的东西 html 是缓存在哪儿的呢\n\n - 使用Object.freeze()\n\n - \n - \n - \n\n ---\n\n \n\n2. ## 开启GZIP\n\n - \n - \n - \n - \n\n3. ## 路由懒加载\n\n - \n\n - \n\n - 补充 关于CSS 和 图片\n\n - 这也是在webpack.prod.conf.js里\n 用 chunkhash 解决 JS. CSS 指纹\n 用hash 解决 图片等指纹\n 用contenthash（ExtractTextPlugin插件提供的）\n 将css代码从打包后的js代码中分离出来\n\n \n 用ExtractTextPlugin 引入的CSS 指纹 不会和JS冲突\n\n https://www.cnblogs.com/giggle/p/9583940.html\n https://www.cnblogs.com/heyushuo/p/8543889.html \n 不过如果是cli打包的话 这些已经默认配置好了的\n\n - \n\n4. ## CDN加速\n\n - 介绍\n\n - 为什么要用CDN\n\n - CDN一般加载一些常用的 写死的不更新的 源生JS CSS jquery vue 库等、但是定制的JS 其他文件等需要商家付费\n\n - CDN的不足\n\n - 到底要不要用CDN呢\n\n - \n\n ```\n <script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></script>\n <script>window.jQuery || document.write('<script src=\"js/jquery-1.11.0.min.js\" type=\"text/javascript\"><\\/script>')</script>\n 都可以\n \n <script type=\"text/javascript\">\n window.jQuery || document.write(\"<script src='javascript/jquery-1.7.1.min.js'>\" + \"<\" + \"/script>\");\n </script>\n 这种是自信的 默认jqeury已经被用户在其他网站加载过了 所以自己就不请求了 反正都一样\n ```\n\n \n\n - 在vue项目中的使用\n\n - https://www.cnblogs.com/Fordestiny/p/8684556.html","source":"_posts/VUE项目性能优化.md","raw":"---\ntitle: VUE项目性能优化\ndate: 2019-08-11 08:50:36\ntop: 3\ntags:\n - VUE\n - 框架\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n[TOC]\n\n\n\n# vue项目性能优化（路由懒加载、gzip加速、cdn加速）\n\n1. ## 基础优化\n\n - 不要在模板中写复杂的表达式\n\n - 慎用watch尤其是deep\n\n - 合理的使用v-if/v-show/v-for\n\n - 善用keep-alive \n\n - keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。\n - include - 字符串或正则表达，只有匹配的组件会被缓存\n exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存include/exclude里的 值必须是 组件的名，需要自己在组件里定义才生效\n - 如果只想 router-view 里面某个组件被缓存，怎么办？\n - 缓存组件 其实就是缓存 那些静态的页面的东西、不涉及动态数据\n 那么静态的东西 html 是缓存在哪儿的呢\n\n - 使用Object.freeze()\n\n - \n - \n - \n\n ---\n\n \n\n2. ## 开启GZIP\n\n - \n - \n - \n - \n\n3. ## 路由懒加载\n\n - \n\n - \n\n - 补充 关于CSS 和 图片\n\n - 这也是在webpack.prod.conf.js里\n 用 chunkhash 解决 JS. CSS 指纹\n 用hash 解决 图片等指纹\n 用contenthash（ExtractTextPlugin插件提供的）\n 将css代码从打包后的js代码中分离出来\n\n \n 用ExtractTextPlugin 引入的CSS 指纹 不会和JS冲突\n\n https://www.cnblogs.com/giggle/p/9583940.html\n https://www.cnblogs.com/heyushuo/p/8543889.html \n 不过如果是cli打包的话 这些已经默认配置好了的\n\n - \n\n4. ## CDN加速\n\n - 介绍\n\n - 为什么要用CDN\n\n - CDN一般加载一些常用的 写死的不更新的 源生JS CSS jquery vue 库等、但是定制的JS 其他文件等需要商家付费\n\n - CDN的不足\n\n - 到底要不要用CDN呢\n\n - \n\n ```\n <script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></script>\n <script>window.jQuery || document.write('<script src=\"js/jquery-1.11.0.min.js\" type=\"text/javascript\"><\\/script>')</script>\n 都可以\n \n <script type=\"text/javascript\">\n window.jQuery || document.write(\"<script src='javascript/jquery-1.7.1.min.js'>\" + \"<\" + \"/script>\");\n </script>\n 这种是自信的 默认jqeury已经被用户在其他网站加载过了 所以自己就不请求了 反正都一样\n ```\n\n \n\n - 在vue项目中的使用\n\n - https://www.cnblogs.com/Fordestiny/p/8684556.html","slug":"VUE项目性能优化","published":1,"_id":"ck1up8tko000h3otj8li4woeh","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h1 id=\"vue项目性能优化（路由懒加载、gzip加速、cdn加速）\"><a href=\"#vue项目性能优化（路由懒加载、gzip加速、cdn加速）\" class=\"headerlink\" title=\"vue项目性能优化（路由懒加载、gzip加速、cdn加速）\"></a>vue项目性能优化（路由懒加载、gzip加速、cdn加速）</h1><ol>\n<li><h2 id=\"基础优化\"><a href=\"#基础优化\" class=\"headerlink\" title=\"基础优化\"></a>基础优化</h2><ul>\n<li><p>不要在模板中写复杂的表达式</p>\n</li>\n<li><p>慎用watch尤其是deep</p>\n</li>\n<li><p>合理的使用v-if/v-show/v-for</p>\n</li>\n<li><p>善用keep-alive </p>\n<ul>\n<li>keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。<img src=\"https://i.loli.net/2019/10/16/d3x67LgsbpVQ524.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/bCt7EAVSHY45dIN.png\" alt>include - 字符串或正则表达，只有匹配的组件会被缓存<br>exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存<img src=\"https://i.loli.net/2019/10/16/iBEWtmeplJbG4Sa.png\" alt>include/exclude里的 值必须是 组件的名，需要自己在组件里定义才生效</li>\n<li>如果只想 router-view 里面某个组件被缓存，怎么办？<img src=\"https://i.loli.net/2019/10/16/kVHjsvLpPXoeG6m.png\" alt></li>\n<li>缓存组件 其实就是缓存 那些静态的页面的东西、不涉及动态数据<br>那么静态的东西 html 是缓存在哪儿的呢<img src=\"https://i.loli.net/2019/10/16/5fYuQKJBbgc9E4z.png\" alt></li>\n</ul>\n</li>\n<li><p>使用Object.freeze()</p>\n<ul>\n<li><img src=\"i.loli.net/2019/10/16/ugAY6PHEhFBORpo.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/B8hIASWqdbzlaLN.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/koC97ymDUfQLqv4.png\" alt></li>\n</ul>\n<hr>\n</li>\n</ul>\n</li>\n</ol>\n<ol start=\"2\">\n<li><h2 id=\"开启GZIP\"><a href=\"#开启GZIP\" class=\"headerlink\" title=\"开启GZIP\"></a>开启GZIP</h2><ul>\n<li><img src=\"https://i.loli.net/2019/10/16/w51mEzsVeMFQ7dY.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/MtUve2EALhsiV9m.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/Afp3kuhlynULo6E.png\" alt></li>\n<li></li>\n</ul>\n</li>\n<li><h2 id=\"路由懒加载\"><a href=\"#路由懒加载\" class=\"headerlink\" title=\"路由懒加载\"></a>路由懒加载</h2><ul>\n<li><p><img src=\"https://i.loli.net/2019/10/16/8UqmYrQIjbZ57lT.png\" alt></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/16/MVmj8OGo3vsQ2zI.png\" alt></p>\n</li>\n<li><p>补充 关于CSS 和 图片</p>\n<ul>\n<li>这也是在webpack.prod.conf.js里<br>用 chunkhash 解决 JS. CSS 指纹<br>用hash 解决 图片等指纹<br>用contenthash（ExtractTextPlugin插件提供的）<br>将css代码从打包后的js代码中分离出来</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n<pre><code> 用ExtractTextPlugin 引入的CSS 指纹 不会和JS冲突\n\n https://www.cnblogs.com/giggle/p/9583940.html\n https://www.cnblogs.com/heyushuo/p/8543889.html \n 不过如果是cli打包的话 这些已经默认配置好了的\n\n- </code></pre><ol start=\"4\">\n<li><h2 id=\"CDN加速\"><a href=\"#CDN加速\" class=\"headerlink\" title=\"CDN加速\"></a>CDN加速</h2><ul>\n<li><p>介绍</p>\n<ul>\n<li><p>为什么要用CDN<img src=\"https://i.loli.net/2019/10/16/sHWpAJlLGdybPIn.png\" alt></p>\n</li>\n<li><p>CDN一般加载一些常用的 写死的不更新的 源生JS CSS jquery vue 库等、但是定制的JS 其他文件等需要商家付费</p>\n</li>\n<li><p>CDN的不足<img src=\"https://i.loli.net/2019/10/16/c5ej4qpAyrJL7m9.png\" alt></p>\n</li>\n<li><p>到底要不要用CDN呢<img src=\"https://i.loli.net/2019/10/16/OjVRCksly43EeGf.png\" alt></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/16/Yr4WoJ2BGs8DhTc.png\" alt></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script></span><br><span class=\"line\"><script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\\/script>')</script></span><br><span class=\"line\">都可以</span><br><span class=\"line\"></span><br><span class=\"line\"><script type="text/javascript"></span><br><span class=\"line\"> window.jQuery || document.write("<script src='javascript/jquery-1.7.1.min.js'>" + "<" + "/script>");</span><br><span class=\"line\"></script></span><br><span class=\"line\">这种是自信的 默认jqeury已经被用户在其他网站加载过了 所以自己就不请求了 反正都一样</span><br></pre></td></tr></table></figure>\n\n\n\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n<ul>\n<li><p>在vue项目中的使用</p>\n<ul>\n<li><a href=\"https://www.cnblogs.com/Fordestiny/p/8684556.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/Fordestiny/p/8684556.html</a></li>\n</ul>\n</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h1 id=\"vue项目性能优化（路由懒加载、gzip加速、cdn加速）\"><a href=\"#vue项目性能优化（路由懒加载、gzip加速、cdn加速）\" class=\"headerlink\" title=\"vue项目性能优化（路由懒加载、gzip加速、cdn加速）\"></a>vue项目性能优化（路由懒加载、gzip加速、cdn加速）</h1><ol>\n<li><h2 id=\"基础优化\"><a href=\"#基础优化\" class=\"headerlink\" title=\"基础优化\"></a>基础优化</h2><ul>\n<li><p>不要在模板中写复杂的表达式</p>\n</li>\n<li><p>慎用watch尤其是deep</p>\n</li>\n<li><p>合理的使用v-if/v-show/v-for</p>\n</li>\n<li><p>善用keep-alive </p>\n<ul>\n<li>keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。<img src=\"https://i.loli.net/2019/10/16/d3x67LgsbpVQ524.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/bCt7EAVSHY45dIN.png\" alt>include - 字符串或正则表达，只有匹配的组件会被缓存<br>exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存<img src=\"https://i.loli.net/2019/10/16/iBEWtmeplJbG4Sa.png\" alt>include/exclude里的 值必须是 组件的名，需要自己在组件里定义才生效</li>\n<li>如果只想 router-view 里面某个组件被缓存，怎么办？<img src=\"https://i.loli.net/2019/10/16/kVHjsvLpPXoeG6m.png\" alt></li>\n<li>缓存组件 其实就是缓存 那些静态的页面的东西、不涉及动态数据<br>那么静态的东西 html 是缓存在哪儿的呢<img src=\"https://i.loli.net/2019/10/16/5fYuQKJBbgc9E4z.png\" alt></li>\n</ul>\n</li>\n<li><p>使用Object.freeze()</p>\n<ul>\n<li><img src=\"i.loli.net/2019/10/16/ugAY6PHEhFBORpo.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/B8hIASWqdbzlaLN.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/koC97ymDUfQLqv4.png\" alt></li>\n</ul>\n<hr>\n</li>\n</ul>\n</li>\n</ol>\n<ol start=\"2\">\n<li><h2 id=\"开启GZIP\"><a href=\"#开启GZIP\" class=\"headerlink\" title=\"开启GZIP\"></a>开启GZIP</h2><ul>\n<li><img src=\"https://i.loli.net/2019/10/16/w51mEzsVeMFQ7dY.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/MtUve2EALhsiV9m.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/Afp3kuhlynULo6E.png\" alt></li>\n<li></li>\n</ul>\n</li>\n<li><h2 id=\"路由懒加载\"><a href=\"#路由懒加载\" class=\"headerlink\" title=\"路由懒加载\"></a>路由懒加载</h2><ul>\n<li><p><img src=\"https://i.loli.net/2019/10/16/8UqmYrQIjbZ57lT.png\" alt></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/16/MVmj8OGo3vsQ2zI.png\" alt></p>\n</li>\n<li><p>补充 关于CSS 和 图片</p>\n<ul>\n<li>这也是在webpack.prod.conf.js里<br>用 chunkhash 解决 JS. CSS 指纹<br>用hash 解决 图片等指纹<br>用contenthash（ExtractTextPlugin插件提供的）<br>将css代码从打包后的js代码中分离出来</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n<pre><code> 用ExtractTextPlugin 引入的CSS 指纹 不会和JS冲突\n\n https://www.cnblogs.com/giggle/p/9583940.html\n https://www.cnblogs.com/heyushuo/p/8543889.html \n 不过如果是cli打包的话 这些已经默认配置好了的\n\n- </code></pre><ol start=\"4\">\n<li><h2 id=\"CDN加速\"><a href=\"#CDN加速\" class=\"headerlink\" title=\"CDN加速\"></a>CDN加速</h2><ul>\n<li><p>介绍</p>\n<ul>\n<li><p>为什么要用CDN<img src=\"https://i.loli.net/2019/10/16/sHWpAJlLGdybPIn.png\" alt></p>\n</li>\n<li><p>CDN一般加载一些常用的 写死的不更新的 源生JS CSS jquery vue 库等、但是定制的JS 其他文件等需要商家付费</p>\n</li>\n<li><p>CDN的不足<img src=\"https://i.loli.net/2019/10/16/c5ej4qpAyrJL7m9.png\" alt></p>\n</li>\n<li><p>到底要不要用CDN呢<img src=\"https://i.loli.net/2019/10/16/OjVRCksly43EeGf.png\" alt></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/16/Yr4WoJ2BGs8DhTc.png\" alt></p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script></span><br><span class=\"line\"><script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\\/script>')</script></span><br><span class=\"line\">都可以</span><br><span class=\"line\"></span><br><span class=\"line\"><script type="text/javascript"></span><br><span class=\"line\"> window.jQuery || document.write("<script src='javascript/jquery-1.7.1.min.js'>" + "<" + "/script>");</span><br><span class=\"line\"></script></span><br><span class=\"line\">这种是自信的 默认jqeury已经被用户在其他网站加载过了 所以自己就不请求了 反正都一样</span><br></pre></td></tr></table></figure>\n\n\n\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n<ul>\n<li><p>在vue项目中的使用</p>\n<ul>\n<li><a href=\"https://www.cnblogs.com/Fordestiny/p/8684556.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/Fordestiny/p/8684556.html</a></li>\n</ul>\n</li>\n</ul>\n"},{"title":"vux公共数据仓库的使用","date":"2019-08-30T01:15:28.000Z","top":5,"comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n1. 认识\n\n - \n - state：既然vuex是用来储存数据的，那么我们的储存地点就是这里。\n - mutations：对数据的处理都是在这里进行。\n - actions：专门用来提交mutations的。\n - getters：获得到state上的数据的。\n - 所以总的来说就是建立一个state，然后调用actions来提交mutations处理state中的数据，最后用getters得到state中的数据。\n 至于为什么要用actions来提交mutations处理state中的数据，原因是mutation 必须是同步函数，\n 而action是异步的不会影响主进程的速度，所以通过actions来调用mutations\n\n2. 安装\n\n - \n - \n - \n - \n\n3. 使用\n\n - this.$store.xxx 直接获取state数据\n\n - \n - \n - \n - \n\n - this.$store.commit(方法名) 线程同步mutations 操作state数据\n\n - vuex里\n - 用参数 操作\n 只能传2个参数\n 但参数可以是对象，可以把过多的数据放对象里\n - 组件方法里 可传参\n\n - this.$store.getters.属性名 this.$store.getters.方法名(参数) \n getters获取state里的数据（只读）并进行加工返回拿来使用，但不会改变state里数据值\n\n - 只要state数据发生改变 引用了getters读出来的数据自动在页面刷新\n - Getter 接受 state 作为其第一个参数：\n - \n - Getter 也可以接受其他 getter 作为第二个参数：\n - 貌似一般是 其他mudle里的 getters\n - 通过让 getter 返回一个函数，来实现给 getter 传参\n - getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。\n 所以用mapGetters映射到组件属性上比较好\n - 通常在computed里 使用，\n - \n\n - this.$store.dispatch(方法名'，参数) actions线程异步让mutations提交\n\n - 一般书写方式\n\n - \n\n - 解构参数书写方式\n\n - 这里把state 也传进来了 实际直接用this.state 也可以\n 这里state获取了cart里added（已添加了的商品的一个对象）\n 并用扩展运算符 把已添加的商品合集或者对象变成了数组的元素\n\n product是参数。是由this.$state.dispatch(方法名,参数)一起传进来 \n\n \n\n - 分发/异步调用方法\n - 传参 案例\n\n - 重点： ...mapGetters,...mapActions 一般都这么用\n\n - https://www.cnblogs.com/mengfangui/p/9150799.html\n - 同理用在 mapMutation、mapState 、mapGetters 等 一回事。\n 一般放在computed里 ：就不用在data里写个对应的映射属性或者method里写个映射的方法\n 还可以时时更新，所有有关联的计算都会被重新计算\n - \n - \n\n - mudles 解决单一store内容太多太复杂和臃肿，Vuex 允许我们将 store 分割成模块（module） 参考官网\n\n \n\n ","source":"_posts/vuex公共数据仓库的使用.md","raw":"---\ntitle: vux公共数据仓库的使用\ndate: 2019-08-30 09:15:28\ntop: 5\ntags:\n - VUE\n - 框架\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n1. 认识\n\n - \n - state：既然vuex是用来储存数据的，那么我们的储存地点就是这里。\n - mutations：对数据的处理都是在这里进行。\n - actions：专门用来提交mutations的。\n - getters：获得到state上的数据的。\n - 所以总的来说就是建立一个state，然后调用actions来提交mutations处理state中的数据，最后用getters得到state中的数据。\n 至于为什么要用actions来提交mutations处理state中的数据，原因是mutation 必须是同步函数，\n 而action是异步的不会影响主进程的速度，所以通过actions来调用mutations\n\n2. 安装\n\n - \n - \n - \n - \n\n3. 使用\n\n - this.$store.xxx 直接获取state数据\n\n - \n - \n - \n - \n\n - this.$store.commit(方法名) 线程同步mutations 操作state数据\n\n - vuex里\n - 用参数 操作\n 只能传2个参数\n 但参数可以是对象，可以把过多的数据放对象里\n - 组件方法里 可传参\n\n - this.$store.getters.属性名 this.$store.getters.方法名(参数) \n getters获取state里的数据（只读）并进行加工返回拿来使用，但不会改变state里数据值\n\n - 只要state数据发生改变 引用了getters读出来的数据自动在页面刷新\n - Getter 接受 state 作为其第一个参数：\n - \n - Getter 也可以接受其他 getter 作为第二个参数：\n - 貌似一般是 其他mudle里的 getters\n - 通过让 getter 返回一个函数，来实现给 getter 传参\n - getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。\n 所以用mapGetters映射到组件属性上比较好\n - 通常在computed里 使用，\n - \n\n - this.$store.dispatch(方法名'，参数) actions线程异步让mutations提交\n\n - 一般书写方式\n\n - \n\n - 解构参数书写方式\n\n - 这里把state 也传进来了 实际直接用this.state 也可以\n 这里state获取了cart里added（已添加了的商品的一个对象）\n 并用扩展运算符 把已添加的商品合集或者对象变成了数组的元素\n\n product是参数。是由this.$state.dispatch(方法名,参数)一起传进来 \n\n \n\n - 分发/异步调用方法\n - 传参 案例\n\n - 重点： ...mapGetters,...mapActions 一般都这么用\n\n - https://www.cnblogs.com/mengfangui/p/9150799.html\n - 同理用在 mapMutation、mapState 、mapGetters 等 一回事。\n 一般放在computed里 ：就不用在data里写个对应的映射属性或者method里写个映射的方法\n 还可以时时更新，所有有关联的计算都会被重新计算\n - \n - \n\n - mudles 解决单一store内容太多太复杂和臃肿，Vuex 允许我们将 store 分割成模块（module） 参考官网\n\n \n\n ","slug":"vuex公共数据仓库的使用","published":1,"_id":"ck1up8tkt000j3otjs61l70fz","layout":"post","photos":[],"link":"","content":"<ol>\n<li><p>认识</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/JMcBHr2ZzLRmbAX.png\" alt></li>\n<li>state：既然vuex是用来储存数据的，那么我们的储存地点就是这里。</li>\n<li>mutations：对数据的处理都是在这里进行。</li>\n<li>actions：专门用来提交mutations的。</li>\n<li>getters：获得到state上的数据的。</li>\n<li>所以总的来说就是建立一个state，然后调用actions来提交mutations处理state中的数据，最后用getters得到state中的数据。<br>至于为什么要用actions来提交mutations处理state中的数据，原因是mutation 必须是同步函数，<br>而action是异步的不会影响主进程的速度，所以通过actions来调用mutations</li>\n</ul>\n</li>\n<li><p>安装</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/wHWDnAYPFQup9SJ.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/aZVKnJfIMr9mb6A.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/MWPpXhOTl5ZryRD.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/xMq7tA4BI8dNWKm.png\" alt></li>\n</ul>\n</li>\n<li><p>使用</p>\n<ul>\n<li><p>this.$store.xxx 直接获取state数据</p>\n<ul>\n<li><img src=\"!%5B1571220159_1_.jpg%5D(https://i.loli.net/2019/10/16/wWsqVHASQ3bc1Gv.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/sN9aKbRi46IEYQ2.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/8ezvx6RZWIDfCoQ.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/W3AKECFRy2JvHpY.png\" alt></li>\n</ul>\n</li>\n<li><p>this.$store.commit(方法名) 线程同步mutations 操作state数据</p>\n<ul>\n<li>vuex里<img src=\"https://i.loli.net/2019/10/16/rvUq96YfIA3dNzZ.png\" alt></li>\n<li>用参数 操作<br>只能传2个参数<br>但参数可以是对象，可以把过多的数据放对象里<img src=\"https://i.loli.net/2019/10/16/jSvJR6ZA3mQa1ox.png\" alt></li>\n<li>组件方法里 可传参<img src=\"https://i.loli.net/2019/10/16/ArnFGlqiM1V5S3K.png\" alt></li>\n</ul>\n</li>\n<li><p>this.$store.getters.属性名 this.$store.getters.方法名(参数)<br>getters获取state里的数据（只读）并进行加工返回拿来使用，但不会改变state里数据值</p>\n<ul>\n<li>只要state数据发生改变 引用了getters读出来的数据自动在页面刷新<img src=\"https://i.loli.net/2019/10/16/QvXaEcjeVh52fL8.png\" alt></li>\n<li>Getter 接受 state 作为其第一个参数：<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/yBATbCDnIUEFkW6.png\" alt></li>\n</ul>\n</li>\n<li>Getter 也可以接受其他 getter 作为第二个参数：<ul>\n<li>貌似一般是 其他mudle里的 getters<img src=\"https://i.loli.net/2019/10/16/sN3C5mBrUnGEOd7.png\" alt></li>\n</ul>\n</li>\n<li>通过让 getter 返回一个函数，来实现给 getter 传参<ul>\n<li>getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。<br>所以用mapGetters映射到组件属性上比较好<img src=\"https://i.loli.net/2019/10/16/irS9NYUnTj1tc2b.png\" alt></li>\n</ul>\n</li>\n<li>通常在computed里 使用，<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/bgSr2Ak5pfajhCu.png\" alt></li>\n</ul>\n</li>\n</ul>\n</li>\n<li><p>this.$store.dispatch(方法名’，参数) actions线程异步让mutations提交</p>\n<ul>\n<li><p>一般书写方式</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/bzjsyYtaV5fXliL.png\" alt></li>\n</ul>\n</li>\n<li><p>解构参数书写方式</p>\n<ul>\n<li><p>这里把state 也传进来了 实际直接用this.state 也可以<br>这里state获取了cart里added（已添加了的商品的一个对象）<br>并用扩展运算符 把已添加的商品合集或者对象变成了数组的元素</p>\n<p>product是参数。是由this.$state.dispatch(方法名,参数)一起传进来 <img src=\"https://i.loli.net/2019/10/16/gRYcv7emNTw6yxP.png\" alt></p>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n<pre><code>- 分发/异步调用方法\n - 传参 案例</code></pre><ul>\n<li><p>重点： …mapGetters,…mapActions 一般都这么用</p>\n<ul>\n<li><a href=\"https://www.cnblogs.com/mengfangui/p/9150799.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/mengfangui/p/9150799.html</a></li>\n<li>同理用在 mapMutation、mapState 、mapGetters 等 一回事。<br>一般放在computed里 ：就不用在data里写个对应的映射属性或者method里写个映射的方法<br>还可以时时更新，所有有关联的计算都会被重新计算</li>\n<li><img src=\"https://i.loli.net/2019/10/16/hfmZJbyBx316TGN.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/Q7qnPDgafiBMNEZ.png\" alt></li>\n</ul>\n</li>\n<li><p>mudles 解决单一store内容太多太复杂和臃肿，Vuex 允许我们将 store 分割成模块（module） 参考官网</p>\n</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<ol>\n<li><p>认识</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/JMcBHr2ZzLRmbAX.png\" alt></li>\n<li>state：既然vuex是用来储存数据的，那么我们的储存地点就是这里。</li>\n<li>mutations：对数据的处理都是在这里进行。</li>\n<li>actions：专门用来提交mutations的。</li>\n<li>getters：获得到state上的数据的。</li>\n<li>所以总的来说就是建立一个state，然后调用actions来提交mutations处理state中的数据，最后用getters得到state中的数据。<br>至于为什么要用actions来提交mutations处理state中的数据，原因是mutation 必须是同步函数，<br>而action是异步的不会影响主进程的速度，所以通过actions来调用mutations</li>\n</ul>\n</li>\n<li><p>安装</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/wHWDnAYPFQup9SJ.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/aZVKnJfIMr9mb6A.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/MWPpXhOTl5ZryRD.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/xMq7tA4BI8dNWKm.png\" alt></li>\n</ul>\n</li>\n<li><p>使用</p>\n<ul>\n<li><p>this.$store.xxx 直接获取state数据</p>\n<ul>\n<li><img src=\"!%5B1571220159_1_.jpg%5D(https://i.loli.net/2019/10/16/wWsqVHASQ3bc1Gv.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/sN9aKbRi46IEYQ2.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/8ezvx6RZWIDfCoQ.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/W3AKECFRy2JvHpY.png\" alt></li>\n</ul>\n</li>\n<li><p>this.$store.commit(方法名) 线程同步mutations 操作state数据</p>\n<ul>\n<li>vuex里<img src=\"https://i.loli.net/2019/10/16/rvUq96YfIA3dNzZ.png\" alt></li>\n<li>用参数 操作<br>只能传2个参数<br>但参数可以是对象，可以把过多的数据放对象里<img src=\"https://i.loli.net/2019/10/16/jSvJR6ZA3mQa1ox.png\" alt></li>\n<li>组件方法里 可传参<img src=\"https://i.loli.net/2019/10/16/ArnFGlqiM1V5S3K.png\" alt></li>\n</ul>\n</li>\n<li><p>this.$store.getters.属性名 this.$store.getters.方法名(参数)<br>getters获取state里的数据（只读）并进行加工返回拿来使用，但不会改变state里数据值</p>\n<ul>\n<li>只要state数据发生改变 引用了getters读出来的数据自动在页面刷新<img src=\"https://i.loli.net/2019/10/16/QvXaEcjeVh52fL8.png\" alt></li>\n<li>Getter 接受 state 作为其第一个参数：<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/yBATbCDnIUEFkW6.png\" alt></li>\n</ul>\n</li>\n<li>Getter 也可以接受其他 getter 作为第二个参数：<ul>\n<li>貌似一般是 其他mudle里的 getters<img src=\"https://i.loli.net/2019/10/16/sN3C5mBrUnGEOd7.png\" alt></li>\n</ul>\n</li>\n<li>通过让 getter 返回一个函数，来实现给 getter 传参<ul>\n<li>getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。<br>所以用mapGetters映射到组件属性上比较好<img src=\"https://i.loli.net/2019/10/16/irS9NYUnTj1tc2b.png\" alt></li>\n</ul>\n</li>\n<li>通常在computed里 使用，<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/bgSr2Ak5pfajhCu.png\" alt></li>\n</ul>\n</li>\n</ul>\n</li>\n<li><p>this.$store.dispatch(方法名’，参数) actions线程异步让mutations提交</p>\n<ul>\n<li><p>一般书写方式</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/16/bzjsyYtaV5fXliL.png\" alt></li>\n</ul>\n</li>\n<li><p>解构参数书写方式</p>\n<ul>\n<li><p>这里把state 也传进来了 实际直接用this.state 也可以<br>这里state获取了cart里added（已添加了的商品的一个对象）<br>并用扩展运算符 把已添加的商品合集或者对象变成了数组的元素</p>\n<p>product是参数。是由this.$state.dispatch(方法名,参数)一起传进来 <img src=\"https://i.loli.net/2019/10/16/gRYcv7emNTw6yxP.png\" alt></p>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n<pre><code>- 分发/异步调用方法\n - 传参 案例</code></pre><ul>\n<li><p>重点： …mapGetters,…mapActions 一般都这么用</p>\n<ul>\n<li><a href=\"https://www.cnblogs.com/mengfangui/p/9150799.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/mengfangui/p/9150799.html</a></li>\n<li>同理用在 mapMutation、mapState 、mapGetters 等 一回事。<br>一般放在computed里 ：就不用在data里写个对应的映射属性或者method里写个映射的方法<br>还可以时时更新，所有有关联的计算都会被重新计算</li>\n<li><img src=\"https://i.loli.net/2019/10/16/hfmZJbyBx316TGN.png\" alt></li>\n<li><img src=\"https://i.loli.net/2019/10/16/Q7qnPDgafiBMNEZ.png\" alt></li>\n</ul>\n</li>\n<li><p>mudles 解决单一store内容太多太复杂和臃肿，Vuex 允许我们将 store 分割成模块（module） 参考官网</p>\n</li>\n</ul>\n"},{"title":"forEach,for...in,for..of的区别","date":"2019-08-09T10:52:39.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n\n\n## 它们的共同点就是 要遍历的都是 数组\n\nforEach ：可以取出、操作 数组的 key\narr.forEach( ( key )=>{\nconsole.log(arr [key]) })\n\n---\n\nfor..in ：按index操作\nfor (var index in arr) {\nconsole.log(arr[index]);\n}\n\n---\n\nfor..of : 直接按value操作，不考虑key\nfor (var value of myArray) {\nconsole.log(value);\n}\n\n---\n\n## 补充： 对象的遍历 方法\n\nObject.keys（entity）取出给定对象的 键作组成一个数组\n\n\nlet person = {name:\"张三\",age:25,address:\"深圳\",getName:function(){}}\nObject.keys(person) // [\"name\", \"age\", \"address\",\"getName\"]\n\n遍历对象内所有 键值对\nObject.keys(person).forEach((key) => {\nconsole.log( person（key）) \n\n","source":"_posts/JS中forEach,for...in,for..of的区别.md","raw":"---\ntitle: forEach,for...in,for..of的区别\ndate: 2019-08-09 18:52:39\ntags:\n - JS\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n\n\n## 它们的共同点就是 要遍历的都是 数组\n\nforEach ：可以取出、操作 数组的 key\narr.forEach( ( key )=>{\nconsole.log(arr [key]) })\n\n---\n\nfor..in ：按index操作\nfor (var index in arr) {\nconsole.log(arr[index]);\n}\n\n---\n\nfor..of : 直接按value操作，不考虑key\nfor (var value of myArray) {\nconsole.log(value);\n}\n\n---\n\n## 补充： 对象的遍历 方法\n\nObject.keys（entity）取出给定对象的 键作组成一个数组\n\n\nlet person = {name:\"张三\",age:25,address:\"深圳\",getName:function(){}}\nObject.keys(person) // [\"name\", \"age\", \"address\",\"getName\"]\n\n遍历对象内所有 键值对\nObject.keys(person).forEach((key) => {\nconsole.log( person（key）) \n\n","slug":"JS中forEach,for...in,for..of的区别","published":1,"_id":"ck1xb6q1i0001c0tj53oldivu","layout":"post","photos":[],"link":"","content":"<h2 id=\"它们的共同点就是-要遍历的都是-数组\"><a href=\"#它们的共同点就是-要遍历的都是-数组\" class=\"headerlink\" title=\"它们的共同点就是 要遍历的都是 数组\"></a>它们的共同点就是 要遍历的都是 数组</h2><p>forEach ：可以取出、操作 数组的 key<br>arr.forEach( ( key )=>{<br>console.log(arr [key]) })</p>\n<hr>\n<p>for..in ：按index操作<br>for (var index in arr) {<br>console.log(arr[index]);<br>}</p>\n<hr>\n<p>for..of : 直接按value操作，不考虑key<br>for (var value of myArray) {<br>console.log(value);<br>}</p>\n<hr>\n<h2 id=\"补充：-对象的遍历-方法\"><a href=\"#补充：-对象的遍历-方法\" class=\"headerlink\" title=\"补充： 对象的遍历 方法\"></a>补充： 对象的遍历 方法</h2><p>Object.keys（entity）取出给定对象的 键作组成一个数组</p>\n<p>let person = {name:”张三”,age:25,address:”深圳”,getName:function(){}}<br>Object.keys(person) // [“name”, “age”, “address”,”getName”]</p>\n<p>遍历对象内所有 键值对<br>Object.keys(person).forEach((key) => {<br>console.log( person（key）) </p>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"它们的共同点就是-要遍历的都是-数组\"><a href=\"#它们的共同点就是-要遍历的都是-数组\" class=\"headerlink\" title=\"它们的共同点就是 要遍历的都是 数组\"></a>它们的共同点就是 要遍历的都是 数组</h2><p>forEach ：可以取出、操作 数组的 key<br>arr.forEach( ( key )=>{<br>console.log(arr [key]) })</p>\n<hr>\n<p>for..in ：按index操作<br>for (var index in arr) {<br>console.log(arr[index]);<br>}</p>\n<hr>\n<p>for..of : 直接按value操作，不考虑key<br>for (var value of myArray) {<br>console.log(value);<br>}</p>\n<hr>\n<h2 id=\"补充：-对象的遍历-方法\"><a href=\"#补充：-对象的遍历-方法\" class=\"headerlink\" title=\"补充： 对象的遍历 方法\"></a>补充： 对象的遍历 方法</h2><p>Object.keys（entity）取出给定对象的 键作组成一个数组</p>\n<p>let person = {name:”张三”,age:25,address:”深圳”,getName:function(){}}<br>Object.keys(person) // [“name”, “age”, “address”,”getName”]</p>\n<p>遍历对象内所有 键值对<br>Object.keys(person).forEach((key) => {<br>console.log( person（key）) </p>\n"},{"title":"generator 函数","date":"2019-08-03T11:47:54.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n[TOC]\n\n\n\n## 写法：\n\n1. 函数 function* XXX（）{ } 多个加这个*\n2. 功能等于return的yield，可以yield多个结果 \n3. \n\n## 取yield方法：\n\n1. 调用next()方法\n2. 调用for..of方法\n\n## next()传参\n\n1. 通过参数传递可以 改变里面的算法 、\n 影响后面next()的输出值\n2. 让AJAX异步变同步\n\n## 用途：\n\n可以连续取出 yield出的 数据。\n因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，\n利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能\n\n## 相似性\n\n这样看上去，好像我们从Generator/yield换到async/await只需要把*都改为async，\nyield都改为await就可以了。 所以很多人都直接拿Generator/yield来解释async/await的行为\n\n","source":"_posts/generator 函数.md","raw":"---\ntitle: generator 函数\ndate: 2019-08-03 19:47:54\ntags:\n - ES6\n - JS\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n[TOC]\n\n\n\n## 写法：\n\n1. 函数 function* XXX（）{ } 多个加这个*\n2. 功能等于return的yield，可以yield多个结果 \n3. \n\n## 取yield方法：\n\n1. 调用next()方法\n2. 调用for..of方法\n\n## next()传参\n\n1. 通过参数传递可以 改变里面的算法 、\n 影响后面next()的输出值\n2. 让AJAX异步变同步\n\n## 用途：\n\n可以连续取出 yield出的 数据。\n因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，\n利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能\n\n## 相似性\n\n这样看上去，好像我们从Generator/yield换到async/await只需要把*都改为async，\nyield都改为await就可以了。 所以很多人都直接拿Generator/yield来解释async/await的行为\n\n","slug":"generator 函数","published":1,"_id":"ck1xbdke4000ac0tj01iqqycc","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"写法：\"><a href=\"#写法：\" class=\"headerlink\" title=\"写法：\"></a>写法：</h2><ol>\n<li>函数 function* XXX（）{ } 多个加这个*</li>\n<li>功能等于return的yield，可以yield多个结果 </li>\n<li><img src=\"https://i.loli.net/2019/10/19/GEeNy6Oa7ixDQ9w.png\" alt=\"1571474646_1_.jpg\"></li>\n</ol>\n<h2 id=\"取yield方法：\"><a href=\"#取yield方法：\" class=\"headerlink\" title=\"取yield方法：\"></a>取yield方法：</h2><ol>\n<li>调用next()方法<img src=\"https://i.loli.net/2019/10/19/8barWtKeCxJ2XHQ.png\" alt=\"1571474662_1_.jpg\"></li>\n<li>调用for..of方法<img src=\"https://i.loli.net/2019/10/19/qtN9Up63rDJvl5H.png\" alt=\"1571474672_1_.jpg\"></li>\n</ol>\n<h2 id=\"next-传参\"><a href=\"#next-传参\" class=\"headerlink\" title=\"next()传参\"></a>next()传参</h2><ol>\n<li>通过参数传递可以 改变里面的算法 、<br>影响后面next()的输出值<img src=\"https://i.loli.net/2019/10/19/Hl7ZUihMt6NyOnq.png\" alt=\"1571474685_1_.jpg\"></li>\n<li>让AJAX异步变同步<img src=\"https://i.loli.net/2019/10/19/QrRZgPwdOBuHVI6.png\" alt=\"1571474697_1_.jpg\"></li>\n</ol>\n<h2 id=\"用途：\"><a href=\"#用途：\" class=\"headerlink\" title=\"用途：\"></a>用途：</h2><p>可以连续取出 yield出的 数据。<br>因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，<br>利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能</p>\n<h2 id=\"相似性\"><a href=\"#相似性\" class=\"headerlink\" title=\"相似性\"></a>相似性</h2><p>这样看上去，好像我们从Generator/yield换到async/await只需要把*都改为async，<br>yield都改为await就可以了。 所以很多人都直接拿Generator/yield来解释async/await的行为</p>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"写法：\"><a href=\"#写法：\" class=\"headerlink\" title=\"写法：\"></a>写法：</h2><ol>\n<li>函数 function* XXX（）{ } 多个加这个*</li>\n<li>功能等于return的yield，可以yield多个结果 </li>\n<li><img src=\"https://i.loli.net/2019/10/19/GEeNy6Oa7ixDQ9w.png\" alt=\"1571474646_1_.jpg\"></li>\n</ol>\n<h2 id=\"取yield方法：\"><a href=\"#取yield方法：\" class=\"headerlink\" title=\"取yield方法：\"></a>取yield方法：</h2><ol>\n<li>调用next()方法<img src=\"https://i.loli.net/2019/10/19/8barWtKeCxJ2XHQ.png\" alt=\"1571474662_1_.jpg\"></li>\n<li>调用for..of方法<img src=\"https://i.loli.net/2019/10/19/qtN9Up63rDJvl5H.png\" alt=\"1571474672_1_.jpg\"></li>\n</ol>\n<h2 id=\"next-传参\"><a href=\"#next-传参\" class=\"headerlink\" title=\"next()传参\"></a>next()传参</h2><ol>\n<li>通过参数传递可以 改变里面的算法 、<br>影响后面next()的输出值<img src=\"https://i.loli.net/2019/10/19/Hl7ZUihMt6NyOnq.png\" alt=\"1571474685_1_.jpg\"></li>\n<li>让AJAX异步变同步<img src=\"https://i.loli.net/2019/10/19/QrRZgPwdOBuHVI6.png\" alt=\"1571474697_1_.jpg\"></li>\n</ol>\n<h2 id=\"用途：\"><a href=\"#用途：\" class=\"headerlink\" title=\"用途：\"></a>用途：</h2><p>可以连续取出 yield出的 数据。<br>因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，<br>利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能</p>\n<h2 id=\"相似性\"><a href=\"#相似性\" class=\"headerlink\" title=\"相似性\"></a>相似性</h2><p>这样看上去，好像我们从Generator/yield换到async/await只需要把*都改为async，<br>yield都改为await就可以了。 所以很多人都直接拿Generator/yield来解释async/await的行为</p>\n"},{"title":"CSS隐藏元素的五种方法","date":"2019-09-19T16:17:50.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n\n\n1.opacity 是设置一个元素的透明度 可用于图片透明度\n\n- opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，\n 而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。\n\n- ```\n img\n {\n opacity:0.4;\n filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */\n }\n ```\n\n \n\n2.visibility 属性值为hidden的时候，元素将会隐藏 也会占据着自己的位置\n\n- 该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，\n 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。\n 如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，\n 只要给想要显示的子元素添加visibility：visible;就可以了\n\n3.dispaly 当属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成 不占据位置\n\n- 该属性才是真正意义上的隐藏元素,当元素的display属性为none时,\n 该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,\n 不但如此,就连它的子元素也会一同从盒子模型中消失。\n 给他和它的子元素添加的任何动画效果交互效果都会不起作用。\n jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。\n\n4.Position 脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作\n\n- 该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，\n 又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），\n 达到一定的值，离开当前可使页面。\n\n5.clip-path 隐藏元素的另一种方法是通过剪裁它们实现。不让它显示出来，但是会占据位置并显示为空\n\n- ```\n .hide {\n clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);\n }\n ```\n\n ","source":"_posts/CSS隐藏元素的五种方法.md","raw":"---\ntitle: CSS隐藏元素的五种方法\ndate: 2019-09-20 00:17:50\ntags:\n - css \n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n\n\n1.opacity 是设置一个元素的透明度 可用于图片透明度\n\n- opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，\n 而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。\n\n- ```\n img\n {\n opacity:0.4;\n filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */\n }\n ```\n\n \n\n2.visibility 属性值为hidden的时候，元素将会隐藏 也会占据着自己的位置\n\n- 该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，\n 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。\n 如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，\n 只要给想要显示的子元素添加visibility：visible;就可以了\n\n3.dispaly 当属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成 不占据位置\n\n- 该属性才是真正意义上的隐藏元素,当元素的display属性为none时,\n 该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,\n 不但如此,就连它的子元素也会一同从盒子模型中消失。\n 给他和它的子元素添加的任何动画效果交互效果都会不起作用。\n jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。\n\n4.Position 脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作\n\n- 该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，\n 又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），\n 达到一定的值，离开当前可使页面。\n\n5.clip-path 隐藏元素的另一种方法是通过剪裁它们实现。不让它显示出来，但是会占据位置并显示为空\n\n- ```\n .hide {\n clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);\n }\n ```\n\n ","slug":"CSS隐藏元素的五种方法","published":1,"_id":"ck1xe79oq000oc0tjmqc8s7on","layout":"post","photos":[],"link":"","content":"<p>1.opacity 是设置一个元素的透明度 可用于图片透明度</p>\n<ul>\n<li><p>opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，<br>而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。</p>\n</li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">img</span><br><span class=\"line\">{</span><br><span class=\"line\">opacity:0.4;</span><br><span class=\"line\">filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n\n\n</li>\n</ul>\n<p>2.visibility 属性值为hidden的时候，元素将会隐藏 也会占据着自己的位置</p>\n<ul>\n<li>该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，<br>与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。<br>如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，<br>只要给想要显示的子元素添加visibility：visible;就可以了</li>\n</ul>\n<p>3.dispaly 当属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成 不占据位置</p>\n<ul>\n<li>该属性才是真正意义上的隐藏元素,当元素的display属性为none时,<br>该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,<br>不但如此,就连它的子元素也会一同从盒子模型中消失。<br>给他和它的子元素添加的任何动画效果交互效果都会不起作用。<br>jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。</li>\n</ul>\n<p>4.Position 脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作</p>\n<ul>\n<li>该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，<br>又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），<br>达到一定的值，离开当前可使页面。</li>\n</ul>\n<p>5.clip-path 隐藏元素的另一种方法是通过剪裁它们实现。不让它显示出来，但是会占据位置并显示为空</p>\n<ul>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">.hide {</span><br><span class=\"line\"> clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>1.opacity 是设置一个元素的透明度 可用于图片透明度</p>\n<ul>\n<li><p>opacity是设置一个元素的透明度，这一设置为0只能从视觉上隐藏元素，<br>而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。</p>\n</li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">img</span><br><span class=\"line\">{</span><br><span class=\"line\">opacity:0.4;</span><br><span class=\"line\">filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n\n\n</li>\n</ul>\n<p>2.visibility 属性值为hidden的时候，元素将会隐藏 也会占据着自己的位置</p>\n<ul>\n<li>该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，<br>与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。<br>如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，<br>只要给想要显示的子元素添加visibility：visible;就可以了</li>\n</ul>\n<p>3.dispaly 当属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成 不占据位置</p>\n<ul>\n<li>该属性才是真正意义上的隐藏元素,当元素的display属性为none时,<br>该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,<br>不但如此,就连它的子元素也会一同从盒子模型中消失。<br>给他和它的子元素添加的任何动画效果交互效果都会不起作用。<br>jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。</li>\n</ul>\n<p>4.Position 脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作</p>\n<ul>\n<li>该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，<br>又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），<br>达到一定的值，离开当前可使页面。</li>\n</ul>\n<p>5.clip-path 隐藏元素的另一种方法是通过剪裁它们实现。不让它显示出来，但是会占据位置并显示为空</p>\n<ul>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">.hide {</span><br><span class=\"line\"> clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n"},{"title":"CSS-flex基础","date":"2019-06-15T08:37:16.000Z","top":2,"comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n[TOC]\n\n\n\n## FLEX作用：\n\n主要目的是使item的宽度、高度按一定顺序填充父容器的可用空间。\n\n## 写在父元素的flex属性：\n\n\t\n\n| | | |\n| :-------------: | ---------------- | :----------------------------------------------------------- |\n| flex-direction | 元素排列方向 | flex-direction: row row-reverse column column-reverse |\n| flex-wrap | 换行 | flex-wrap: nowrap wrap wrap-reverse |\n| flex-flow | 上面两种的缩写 | flex-flow，是flex-direction和flex-wrap的简写形式<br />flex-flow:<flex-direction> <flex-wrap>; |\n| justify-content | 水平对齐方式 | justify-content: flex-start flex-end center space-between space-around |\n| align-items | 垂直对齐方式 | align-items: stretch flex-start flex-end center baseline |\n| align-content | 多行垂直对齐方式 | align-content : stretch flex-start flex-end center space-between space-around |\n\n\n\n1. display: flex | inline-flex （此属性为必须）\n 父容器样式中的display属性设置为 flex 或 inline-flex。\n2. 设置子元素 item对齐的属性 \n - justify-content：\n 控制所有item在main axis(主轴)上的对齐方式。\n - flex-start 默认值：item从 main axis(主轴)头部开始。\n - flex-end：item从 main axis(主轴)尾部开始。\n - center：item在 main axis(主轴)居中展示。\n - space-between：item均匀的分布在 main axis(主轴)上，其中第一个在 main axis(主轴)头部，最后一个在 main axis(主轴)尾部。\n - space-around：item分布在 main axis(主轴)上。每个item的左右间隔是相等的。如每个item左右间隔为15px，第1个item与开始初间隔15px，第1个与第2个item间隔30px。\n - space-evenly：item均匀分布在 main axis(主轴)上。\n - \n - align-content：\n 当 flex-wrap:wrap* 时(即item可以自动换行排列时才能用这个属性)，控制item在cross axis(交叉轴)上的对齐方式。\n - stretch 默认值：item高度撑开到整个cross axis(交叉轴)。\n - flex-start：item头对齐在cross axis(交叉轴)的开始处。\n - flex-end：item尾对齐在cross axis(交叉轴)的结尾处。\n - center：item垂直居中。\n - space-between：item均匀的分布在cross axis(交叉轴)上，其中第一个在cross axis(交叉轴)头部，最后一个在cross axis(交叉轴)尾部。\n - space-around：item分布在cross axis(交叉轴)上。每个item的上下间隔是相等的。。如每个item上下间隔为15px，第1个item与开始初间隔15px，第1个与第2个item间隔30px。\n - \n - align-items：\n 控制所有item在cross axis(交叉轴)的对齐方式。\n - stretch 默认值：item高度撑开到整个cross axis(交叉轴)。\n - flex-start：item头对齐在cross axis(交叉轴)的开始处。\n - flex-end：item尾对齐在cross axis(交叉轴)的结尾处。\n - center：item垂直居中。\n - baseline：根据内容基线对齐。\n - \n - 主轴与交叉轴\n - flex-direction/flow设置了row 或者 column的方向 【就是主轴方向，另一方向则为交叉轴】←👈这是重点！\n - \n - main axis /cross axis\n (主轴)：指的是与flex-direction设定的值方向一致的轴，如flex-direction:row；那么主轴就是横轴。\n (交叉轴)：与main axis(主轴)交叉的轴，如主轴为横轴，交叉轴就是纵轴。\n3. flex-direction: row | row-reverse | column | column-reverse;\n 设置item展示的方向\n - row 默认值：item显示在一行，从左到右依次展示。\n - row-reverse：item显示在一行，从右到左依次展示。\n - column：item显示在一列，从上到下依次展示。\n - column-reverse：item显示在一列，从下到上依次展示。\n - \n4. flex-wrap: nowrap | wrap | wrap-reverse; \n 当item在一行展示不下时，设置换行显示的方式。\n - nowrap 默认值：item不会换行。\n - wrap：按照item本身的宽度展示，若当前行展示不下时会换一行展示。\n - wrap-reverse：同wrap，不过是按相反方向换行展示item\n - \n5. flex-flow: \n 是flex-direction flex-wrap 的简写方式两者的属性都可以混合用\n - \n\n## 写在子元素的flex属性\n\n| | | |\n| ----------- | ---------------- | :----------------------------------------------------------: |\n| order | 显示顺序 | type:\"interger\"，默认0 |\n| flex-grow | 放大比例 | type:\"Number\"，默认0，即如果存在剩余空间，也不会放大；如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有剩余空间）；不同项目设置不同flex-grow属性值，根据设置的数据按比例分配剩余空间 |\n| flex-shrink | 缩小比例 | type:\"Number\"，默认为1，即如果空间不足，项目将缩小；\n如果有一个项目的flex-shrink为0，空间不足时，它不缩小。\n不同项目设置不同flex-shrink属性值，根据设置的数据按比例缩小\n！注意：先根据宽度（当宽度超多定值时）再根据内容缩小 |\n| flex-basis | 伸缩基准值 | flex-basis: auto number initial inherit\n基准值：自动(默认) 数值（100px） 初始 继承 |\n| align-self | 纵轴方向对齐方式 | 单个项目有与其他项目不一样的对齐方式，可覆盖align-items\nalign-self： auto flex-start flex-end center baseline stretch\" |\n\n\n\n1. item的默认宽度、高度\n - 1)父容器设置了height，而item没有设置，那么item的height会填满父容器的height。因为默认情况下parent设置item的样式为align-items : stretch。\n - 2)父容器未设置height，某个item设置了height，其他item的height会等于item中最大的height。\n - 3)父容器和item都没有设置height，item会根据内容大小设置height，其他item的height会等于item中最大的height。\n\n2. order: <integer>; /* default is 0 */可以控制item在父容器中展现的顺序。\n order属性定义项目的排列顺序。数值越小（包含负值），排列越靠前，默认为0\n\n - <https://blog.csdn.net/qq_44607694/article/details/89762348>\n\n3. flex-basis: number | auto; \n 设置item的初始化大小。\n\n - auto 默认值：根据内容区域的设置大小。\n\n - number ：可以为具体数字或百分比。\n\n - inherit ：从父元素继承该属性。\n\n - ## Flex Items的应用准则\n\n - **content –> width –> flex-basis (limted by max|min-width)**\n 也就是说，\n\n - 如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小\n\n - 如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小\n\n - ```\n item {\n width: 30px;\n flex-basis: 250px;\n }此处的width将失效，宽会变成250px\n \n ```\n\n - ## 使用max-width来限制flex-basis\n\n - ```\n item {\n flex-basis: 250px;\n max-width: 100px;\n }即使我们将flex-basis设置为250px，item的宽度还是被限制在了100px。所以最终的flex-basis是100px：\n \n 同理用在 min-width\n ```\n\n \n\n \n\n4. flex-grow: <number>; /* default 0 */ \n 指定item如何瓜分剩余空间。number 为0 表示不会增长\n 1，表示所有 的item都会等比例的增长分配充剩余的空间：\n \n\n5. flex-shrink: <number>; /* default 1 */\n item缩减的占比,参考 grow 增，效果与之相反，如果item总宽度大于了父盒子，那么会按number的比例进行缩减/吸收\n\n - 算法参考：\n 容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px，子项2占用的基准空间是150px，子项3占用基准空间是100px，总基准空间为 250+150+100=500px。容器放不下，多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1)， 子项2 flex-shrink: 2，子项3 flex-shrink: 2。子项1需要吸收的的空间为 `(250*1)/(250*1+150*2+100*2) * 100 = 33.33px`，子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为`(150*2)/(250*1+150*2+100*2) * 100=40px`，子项2真实空间为 `150-40 = 110px`。子项3吸收的空间为`(100*2)/(250*1+150*2+100*2) * 100 = 26.67px`，真实的空间为`100-26.67=73.33px`。\n\n6. flex \n flex-grow flex-shrink flex-basis 的简写方式\n\n - flex: flex-grow flex-shrink flex-basis;\n 默认值：0 1 auto\n\n## 一般自适应布局场景\n\n1. 左右\n - \n - \n2. 水平垂直居中\n - \n\n\n\n","source":"_posts/flex布局 (IE至少11).md","raw":"---\ntitle: CSS-flex基础\ndate: 2019-06-15 16:37:16\ntop: 2\ntags:\n - CSS\n - 响应式\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n[TOC]\n\n\n\n## FLEX作用：\n\n主要目的是使item的宽度、高度按一定顺序填充父容器的可用空间。\n\n## 写在父元素的flex属性：\n\n\t\n\n| | | |\n| :-------------: | ---------------- | :----------------------------------------------------------- |\n| flex-direction | 元素排列方向 | flex-direction: row row-reverse column column-reverse |\n| flex-wrap | 换行 | flex-wrap: nowrap wrap wrap-reverse |\n| flex-flow | 上面两种的缩写 | flex-flow，是flex-direction和flex-wrap的简写形式<br />flex-flow:<flex-direction> <flex-wrap>; |\n| justify-content | 水平对齐方式 | justify-content: flex-start flex-end center space-between space-around |\n| align-items | 垂直对齐方式 | align-items: stretch flex-start flex-end center baseline |\n| align-content | 多行垂直对齐方式 | align-content : stretch flex-start flex-end center space-between space-around |\n\n\n\n1. display: flex | inline-flex （此属性为必须）\n 父容器样式中的display属性设置为 flex 或 inline-flex。\n2. 设置子元素 item对齐的属性 \n - justify-content：\n 控制所有item在main axis(主轴)上的对齐方式。\n - flex-start 默认值：item从 main axis(主轴)头部开始。\n - flex-end：item从 main axis(主轴)尾部开始。\n - center：item在 main axis(主轴)居中展示。\n - space-between：item均匀的分布在 main axis(主轴)上，其中第一个在 main axis(主轴)头部，最后一个在 main axis(主轴)尾部。\n - space-around：item分布在 main axis(主轴)上。每个item的左右间隔是相等的。如每个item左右间隔为15px，第1个item与开始初间隔15px，第1个与第2个item间隔30px。\n - space-evenly：item均匀分布在 main axis(主轴)上。\n - \n - align-content：\n 当 flex-wrap:wrap* 时(即item可以自动换行排列时才能用这个属性)，控制item在cross axis(交叉轴)上的对齐方式。\n - stretch 默认值：item高度撑开到整个cross axis(交叉轴)。\n - flex-start：item头对齐在cross axis(交叉轴)的开始处。\n - flex-end：item尾对齐在cross axis(交叉轴)的结尾处。\n - center：item垂直居中。\n - space-between：item均匀的分布在cross axis(交叉轴)上，其中第一个在cross axis(交叉轴)头部，最后一个在cross axis(交叉轴)尾部。\n - space-around：item分布在cross axis(交叉轴)上。每个item的上下间隔是相等的。。如每个item上下间隔为15px，第1个item与开始初间隔15px，第1个与第2个item间隔30px。\n - \n - align-items：\n 控制所有item在cross axis(交叉轴)的对齐方式。\n - stretch 默认值：item高度撑开到整个cross axis(交叉轴)。\n - flex-start：item头对齐在cross axis(交叉轴)的开始处。\n - flex-end：item尾对齐在cross axis(交叉轴)的结尾处。\n - center：item垂直居中。\n - baseline：根据内容基线对齐。\n - \n - 主轴与交叉轴\n - flex-direction/flow设置了row 或者 column的方向 【就是主轴方向，另一方向则为交叉轴】←👈这是重点！\n - \n - main axis /cross axis\n (主轴)：指的是与flex-direction设定的值方向一致的轴，如flex-direction:row；那么主轴就是横轴。\n (交叉轴)：与main axis(主轴)交叉的轴，如主轴为横轴，交叉轴就是纵轴。\n3. flex-direction: row | row-reverse | column | column-reverse;\n 设置item展示的方向\n - row 默认值：item显示在一行，从左到右依次展示。\n - row-reverse：item显示在一行，从右到左依次展示。\n - column：item显示在一列，从上到下依次展示。\n - column-reverse：item显示在一列，从下到上依次展示。\n - \n4. flex-wrap: nowrap | wrap | wrap-reverse; \n 当item在一行展示不下时，设置换行显示的方式。\n - nowrap 默认值：item不会换行。\n - wrap：按照item本身的宽度展示，若当前行展示不下时会换一行展示。\n - wrap-reverse：同wrap，不过是按相反方向换行展示item\n - \n5. flex-flow: \n 是flex-direction flex-wrap 的简写方式两者的属性都可以混合用\n - \n\n## 写在子元素的flex属性\n\n| | | |\n| ----------- | ---------------- | :----------------------------------------------------------: |\n| order | 显示顺序 | type:\"interger\"，默认0 |\n| flex-grow | 放大比例 | type:\"Number\"，默认0，即如果存在剩余空间，也不会放大；如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有剩余空间）；不同项目设置不同flex-grow属性值，根据设置的数据按比例分配剩余空间 |\n| flex-shrink | 缩小比例 | type:\"Number\"，默认为1，即如果空间不足，项目将缩小；\n如果有一个项目的flex-shrink为0，空间不足时，它不缩小。\n不同项目设置不同flex-shrink属性值，根据设置的数据按比例缩小\n！注意：先根据宽度（当宽度超多定值时）再根据内容缩小 |\n| flex-basis | 伸缩基准值 | flex-basis: auto number initial inherit\n基准值：自动(默认) 数值（100px） 初始 继承 |\n| align-self | 纵轴方向对齐方式 | 单个项目有与其他项目不一样的对齐方式，可覆盖align-items\nalign-self： auto flex-start flex-end center baseline stretch\" |\n\n\n\n1. item的默认宽度、高度\n - 1)父容器设置了height，而item没有设置，那么item的height会填满父容器的height。因为默认情况下parent设置item的样式为align-items : stretch。\n - 2)父容器未设置height，某个item设置了height，其他item的height会等于item中最大的height。\n - 3)父容器和item都没有设置height，item会根据内容大小设置height，其他item的height会等于item中最大的height。\n\n2. order: <integer>; /* default is 0 */可以控制item在父容器中展现的顺序。\n order属性定义项目的排列顺序。数值越小（包含负值），排列越靠前，默认为0\n\n - <https://blog.csdn.net/qq_44607694/article/details/89762348>\n\n3. flex-basis: number | auto; \n 设置item的初始化大小。\n\n - auto 默认值：根据内容区域的设置大小。\n\n - number ：可以为具体数字或百分比。\n\n - inherit ：从父元素继承该属性。\n\n - ## Flex Items的应用准则\n\n - **content –> width –> flex-basis (limted by max|min-width)**\n 也就是说，\n\n - 如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小\n\n - 如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小\n\n - ```\n item {\n width: 30px;\n flex-basis: 250px;\n }此处的width将失效，宽会变成250px\n \n ```\n\n - ## 使用max-width来限制flex-basis\n\n - ```\n item {\n flex-basis: 250px;\n max-width: 100px;\n }即使我们将flex-basis设置为250px，item的宽度还是被限制在了100px。所以最终的flex-basis是100px：\n \n 同理用在 min-width\n ```\n\n \n\n \n\n4. flex-grow: <number>; /* default 0 */ \n 指定item如何瓜分剩余空间。number 为0 表示不会增长\n 1，表示所有 的item都会等比例的增长分配充剩余的空间：\n \n\n5. flex-shrink: <number>; /* default 1 */\n item缩减的占比,参考 grow 增，效果与之相反，如果item总宽度大于了父盒子，那么会按number的比例进行缩减/吸收\n\n - 算法参考：\n 容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px，子项2占用的基准空间是150px，子项3占用基准空间是100px，总基准空间为 250+150+100=500px。容器放不下，多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1)， 子项2 flex-shrink: 2，子项3 flex-shrink: 2。子项1需要吸收的的空间为 `(250*1)/(250*1+150*2+100*2) * 100 = 33.33px`，子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为`(150*2)/(250*1+150*2+100*2) * 100=40px`，子项2真实空间为 `150-40 = 110px`。子项3吸收的空间为`(100*2)/(250*1+150*2+100*2) * 100 = 26.67px`，真实的空间为`100-26.67=73.33px`。\n\n6. flex \n flex-grow flex-shrink flex-basis 的简写方式\n\n - flex: flex-grow flex-shrink flex-basis;\n 默认值：0 1 auto\n\n## 一般自适应布局场景\n\n1. 左右\n - \n - \n2. 水平垂直居中\n - \n\n\n\n","slug":"flex布局 (IE至少11)","published":1,"_id":"ck1xe7mbr000tc0tjr4g0sg54","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"FLEX作用：\"><a href=\"#FLEX作用：\" class=\"headerlink\" title=\"FLEX作用：\"></a>FLEX作用：</h2><p>主要目的是使item的宽度、高度按一定顺序填充父容器的可用空间。<img src=\"https://i.loli.net/2019/10/19/gL6lsvDTFXScfU9.png\" alt=\"1571479387_1_.jpg\"></p>\n<h2 id=\"写在父元素的flex属性：\"><a href=\"#写在父元素的flex属性：\" class=\"headerlink\" title=\"写在父元素的flex属性：\"></a>写在父元素的flex属性：</h2><p> </p>\n<table>\n<thead>\n<tr>\n<th align=\"center\"></th>\n<th></th>\n<th align=\"left\"></th>\n</tr>\n</thead>\n<tbody><tr>\n<td align=\"center\">flex-direction</td>\n<td>元素排列方向</td>\n<td align=\"left\">flex-direction: row row-reverse column column-reverse</td>\n</tr>\n<tr>\n<td align=\"center\">flex-wrap</td>\n<td>换行</td>\n<td align=\"left\">flex-wrap: nowrap wrap wrap-reverse</td>\n</tr>\n<tr>\n<td align=\"center\">flex-flow</td>\n<td>上面两种的缩写</td>\n<td align=\"left\">flex-flow，是flex-direction和flex-wrap的简写形式<br>flex-flow:<flex-direction> <flex-wrap>;</flex-wrap></flex-direction></td>\n</tr>\n<tr>\n<td align=\"center\">justify-content</td>\n<td>水平对齐方式</td>\n<td align=\"left\">justify-content: flex-start flex-end center space-between space-around</td>\n</tr>\n<tr>\n<td align=\"center\">align-items</td>\n<td>垂直对齐方式</td>\n<td align=\"left\">align-items: stretch flex-start flex-end center baseline</td>\n</tr>\n<tr>\n<td align=\"center\">align-content</td>\n<td>多行垂直对齐方式</td>\n<td align=\"left\">align-content : stretch flex-start flex-end center space-between space-around</td>\n</tr>\n</tbody></table>\n<ol>\n<li>display: flex | inline-flex （此属性为必须）<br>父容器样式中的display属性设置为 flex 或 inline-flex。</li>\n<li>设置子元素 item对齐的属性 <ul>\n<li>justify-content：<br>控制所有item在main axis(主轴)上的对齐方式。<ul>\n<li>flex-start 默认值：item从 main axis(主轴)头部开始。</li>\n<li>flex-end：item从 main axis(主轴)尾部开始。</li>\n<li>center：item在 main axis(主轴)居中展示。</li>\n<li>space-between：item均匀的分布在 main axis(主轴)上，其中第一个在 main axis(主轴)头部，最后一个在 main axis(主轴)尾部。</li>\n<li>space-around：item分布在 main axis(主轴)上。每个item的左右间隔是相等的。如每个item左右间隔为15px，第1个item与开始初间隔15px，第1个与第2个item间隔30px。</li>\n<li>space-evenly：item均匀分布在 main axis(主轴)上。</li>\n<li><img src=\"https://i.loli.net/2019/10/19/wMk6LbDOfqBRAxo.png\" alt=\"1571479425_1_.jpg\"></li>\n</ul>\n</li>\n<li>align-content：<br>当 flex-wrap:wrap* 时(即item可以自动换行排列时才能用这个属性)，控制item在cross axis(交叉轴)上的对齐方式。<ul>\n<li>stretch 默认值：item高度撑开到整个cross axis(交叉轴)。</li>\n<li>flex-start：item头对齐在cross axis(交叉轴)的开始处。</li>\n<li>flex-end：item尾对齐在cross axis(交叉轴)的结尾处。</li>\n<li>center：item垂直居中。</li>\n<li>space-between：item均匀的分布在cross axis(交叉轴)上，其中第一个在cross axis(交叉轴)头部，最后一个在cross axis(交叉轴)尾部。</li>\n<li>space-around：item分布在cross axis(交叉轴)上。每个item的上下间隔是相等的。。如每个item上下间隔为15px，第1个item与开始初间隔15px，第1个与第2个item间隔30px。</li>\n<li><img src=\"https://i.loli.net/2019/10/19/fupD3dRWo5GStEO.png\" alt=\"1571479442_1_.jpg\"></li>\n</ul>\n</li>\n<li>align-items：<br>控制所有item在cross axis(交叉轴)的对齐方式。<ul>\n<li>stretch 默认值：item高度撑开到整个cross axis(交叉轴)。</li>\n<li>flex-start：item头对齐在cross axis(交叉轴)的开始处。</li>\n<li>flex-end：item尾对齐在cross axis(交叉轴)的结尾处。</li>\n<li>center：item垂直居中。</li>\n<li>baseline：根据内容基线对齐。</li>\n<li><img src=\"https://i.loli.net/2019/10/19/eKzM4IjCiRHg5qp.png\" alt=\"1571479433_1_.jpg\"></li>\n</ul>\n</li>\n<li>主轴与交叉轴<ul>\n<li>flex-direction/flow设置了row 或者 column的方向 【就是主轴方向，另一方向则为交叉轴】←👈这是重点！</li>\n<li><img src=\"https://i.loli.net/2019/10/19/lh1MsjEzTvJLS9u.png\" alt=\"1571479453_1_.jpg\"></li>\n<li>main axis /cross axis<br>(主轴)：指的是与flex-direction设定的值方向一致的轴，如flex-direction:row；那么主轴就是横轴。<br>(交叉轴)：与main axis(主轴)交叉的轴，如主轴为横轴，交叉轴就是纵轴。</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>flex-direction: row | row-reverse | column | column-reverse;<br> 设置item展示的方向<ul>\n<li>row 默认值：item显示在一行，从左到右依次展示。</li>\n<li>row-reverse：item显示在一行，从右到左依次展示。</li>\n<li>column：item显示在一列，从上到下依次展示。</li>\n<li>column-reverse：item显示在一列，从下到上依次展示。</li>\n<li><img src=\"https://i.loli.net/2019/10/19/JtGmFCEWif3zXlr.png\" alt=\"1571479463_1_.jpg\"></li>\n</ul>\n</li>\n<li>flex-wrap: nowrap | wrap | wrap-reverse;<br>当item在一行展示不下时，设置换行显示的方式。<ul>\n<li>nowrap 默认值：item不会换行。</li>\n<li>wrap：按照item本身的宽度展示，若当前行展示不下时会换一行展示。</li>\n<li>wrap-reverse：同wrap，不过是按相反方向换行展示item</li>\n<li><img src=\"https://i.loli.net/2019/10/19/pnqAah7bJoPVQz4.png\" alt=\"1571479471_1_.jpg\"></li>\n</ul>\n</li>\n<li>flex-flow:<br>是flex-direction flex-wrap 的简写方式两者的属性都可以混合用<ul>\n<li><img src=\"https://i.loli.net/2019/10/19/ZnACF9Ib3TvqgSE.png\" alt=\"1571479481_1_.jpg\"></li>\n</ul>\n</li>\n</ol>\n<h2 id=\"写在子元素的flex属性\"><a href=\"#写在子元素的flex属性\" class=\"headerlink\" title=\"写在子元素的flex属性\"></a>写在子元素的flex属性</h2><table>\n<thead>\n<tr>\n<th></th>\n<th></th>\n<th align=\"center\"></th>\n</tr>\n</thead>\n<tbody><tr>\n<td>order</td>\n<td>显示顺序</td>\n<td align=\"center\">type:”interger”，默认0</td>\n</tr>\n<tr>\n<td>flex-grow</td>\n<td>放大比例</td>\n<td align=\"center\">type:”Number”，默认0，即如果存在剩余空间，也不会放大；如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有剩余空间）；不同项目设置不同flex-grow属性值，根据设置的数据按比例分配剩余空间</td>\n</tr>\n<tr>\n<td>flex-shrink</td>\n<td>缩小比例</td>\n<td align=\"center\">type:”Number”，默认为1，即如果空间不足，项目将缩小；</td>\n</tr>\n<tr>\n<td>如果有一个项目的flex-shrink为0，空间不足时，它不缩小。</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n<tr>\n<td>不同项目设置不同flex-shrink属性值，根据设置的数据按比例缩小</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n<tr>\n<td>！注意：先根据宽度（当宽度超多定值时）再根据内容缩小</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n<tr>\n<td>flex-basis</td>\n<td>伸缩基准值</td>\n<td align=\"center\">flex-basis: auto number initial inherit</td>\n</tr>\n<tr>\n<td>基准值：自动(默认) 数值（100px） 初始 继承</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n<tr>\n<td>align-self</td>\n<td>纵轴方向对齐方式</td>\n<td align=\"center\">单个项目有与其他项目不一样的对齐方式，可覆盖align-items</td>\n</tr>\n<tr>\n<td>align-self： auto flex-start flex-end center baseline stretch”</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n</tbody></table>\n<ol>\n<li><p>item的默认宽度、高度</p>\n<ul>\n<li>1)父容器设置了height，而item没有设置，那么item的height会填满父容器的height。因为默认情况下parent设置item的样式为align-items : stretch。</li>\n<li>2)父容器未设置height，某个item设置了height，其他item的height会等于item中最大的height。</li>\n<li>3)父容器和item都没有设置height，item会根据内容大小设置height，其他item的height会等于item中最大的height。</li>\n</ul>\n</li>\n<li><p>order: <integer>; /* default is 0 */可以控制item在父容器中展现的顺序。<br>order属性定义项目的排列顺序。数值越小（包含负值），排列越靠前，默认为0</integer></p>\n<ul>\n<li><a href=\"https://blog.csdn.net/qq_44607694/article/details/89762348\" target=\"_blank\" rel=\"noopener\">https://blog.csdn.net/qq_44607694/article/details/89762348</a></li>\n</ul>\n</li>\n<li><p>flex-basis: number | auto;<br>设置item的初始化大小。</p>\n<ul>\n<li><p>auto 默认值：根据内容区域的设置大小。</p>\n</li>\n<li><p>number ：可以为具体数字或百分比。</p>\n</li>\n<li><p>inherit ：从父元素继承该属性。</p>\n</li>\n<li><h2 id=\"Flex-Items的应用准则\"><a href=\"#Flex-Items的应用准则\" class=\"headerlink\" title=\"Flex Items的应用准则\"></a>Flex Items的应用准则</h2><ul>\n<li><p><strong>content –> width –> flex-basis (limted by max|min-width)</strong><br>也就是说，</p>\n</li>\n<li><p>如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小</p>\n</li>\n<li><p>如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小</p>\n</li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">item {</span><br><span class=\"line\"> width: 30px;</span><br><span class=\"line\"> flex-basis: 250px;</span><br><span class=\"line\">}此处的width将失效，宽会变成250px</span><br></pre></td></tr></table></figure>\n</li>\n<li><h2 id=\"使用max-width来限制flex-basis\"><a href=\"#使用max-width来限制flex-basis\" class=\"headerlink\" title=\"使用max-width来限制flex-basis\"></a>使用max-width来限制flex-basis</h2></li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">item {</span><br><span class=\"line\"> flex-basis: 250px;</span><br><span class=\"line\"> max-width: 100px;</span><br><span class=\"line\">}即使我们将flex-basis设置为250px，item的宽度还是被限制在了100px。所以最终的flex-basis是100px：</span><br><span class=\"line\"></span><br><span class=\"line\">同理用在 min-width</span><br></pre></td></tr></table></figure>\n\n\n\n\n\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n<ol start=\"4\">\n<li><p>flex-grow: <number>; /* default 0 */<br>指定item如何瓜分剩余空间。number 为0 表示不会增长<br> 1，表示所有 的item都会等比例的增长分配充剩余的空间：<br><img src=\"https://i.loli.net/2019/10/19/BRQTbwzpgld5oWK.png\" alt=\"1571479491_1_.jpg\"></number></p>\n</li>\n<li><p>flex-shrink: <number>; /* default 1 */<br>item缩减的占比,参考 grow 增，效果与之相反，如果item总宽度大于了父盒子，那么会按number的比例进行缩减/吸收</number></p>\n<ul>\n<li>算法参考：<br>容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px，子项2占用的基准空间是150px，子项3占用基准空间是100px，总基准空间为 250+150+100=500px。容器放不下，多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1)， 子项2 flex-shrink: 2，子项3 flex-shrink: 2。子项1需要吸收的的空间为 <code>(250*1)/(250*1+150*2+100*2) * 100 = 33.33px</code>，子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为<code>(150*2)/(250*1+150*2+100*2) * 100=40px</code>，子项2真实空间为 <code>150-40 = 110px</code>。子项3吸收的空间为<code>(100*2)/(250*1+150*2+100*2) * 100 = 26.67px</code>，真实的空间为<code>100-26.67=73.33px</code>。</li>\n</ul>\n</li>\n<li><p>flex<br>flex-grow flex-shrink flex-basis 的简写方式</p>\n<ul>\n<li>flex: flex-grow flex-shrink flex-basis;<br>默认值：0 1 auto</li>\n</ul>\n</li>\n</ol>\n<h2 id=\"一般自适应布局场景\"><a href=\"#一般自适应布局场景\" class=\"headerlink\" title=\"一般自适应布局场景\"></a>一般自适应布局场景</h2><ol>\n<li>左右<ul>\n<li><img src=\"https://i.loli.net/2019/10/19/sG57ZHuJoydINnk.png\" alt=\"1571497108_1_.jpg\"></li>\n<li><img src=\"https://i.loli.net/2019/10/19/MfQ1O34RDPXbsye.png\" alt=\"1571497099_1_.jpg\"></li>\n</ul>\n</li>\n<li>水平垂直居中<ul>\n<li><img src=\"https://i.loli.net/2019/10/19/sG57ZHuJoydINnk.png\" alt=\"1571497108_1_.jpg\"></li>\n</ul>\n</li>\n</ol>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"FLEX作用：\"><a href=\"#FLEX作用：\" class=\"headerlink\" title=\"FLEX作用：\"></a>FLEX作用：</h2><p>主要目的是使item的宽度、高度按一定顺序填充父容器的可用空间。<img src=\"https://i.loli.net/2019/10/19/gL6lsvDTFXScfU9.png\" alt=\"1571479387_1_.jpg\"></p>\n<h2 id=\"写在父元素的flex属性：\"><a href=\"#写在父元素的flex属性：\" class=\"headerlink\" title=\"写在父元素的flex属性：\"></a>写在父元素的flex属性：</h2><p> </p>\n<table>\n<thead>\n<tr>\n<th align=\"center\"></th>\n<th></th>\n<th align=\"left\"></th>\n</tr>\n</thead>\n<tbody><tr>\n<td align=\"center\">flex-direction</td>\n<td>元素排列方向</td>\n<td align=\"left\">flex-direction: row row-reverse column column-reverse</td>\n</tr>\n<tr>\n<td align=\"center\">flex-wrap</td>\n<td>换行</td>\n<td align=\"left\">flex-wrap: nowrap wrap wrap-reverse</td>\n</tr>\n<tr>\n<td align=\"center\">flex-flow</td>\n<td>上面两种的缩写</td>\n<td align=\"left\">flex-flow，是flex-direction和flex-wrap的简写形式<br>flex-flow:<flex-direction> <flex-wrap>;</flex-wrap></flex-direction></td>\n</tr>\n<tr>\n<td align=\"center\">justify-content</td>\n<td>水平对齐方式</td>\n<td align=\"left\">justify-content: flex-start flex-end center space-between space-around</td>\n</tr>\n<tr>\n<td align=\"center\">align-items</td>\n<td>垂直对齐方式</td>\n<td align=\"left\">align-items: stretch flex-start flex-end center baseline</td>\n</tr>\n<tr>\n<td align=\"center\">align-content</td>\n<td>多行垂直对齐方式</td>\n<td align=\"left\">align-content : stretch flex-start flex-end center space-between space-around</td>\n</tr>\n</tbody></table>\n<ol>\n<li>display: flex | inline-flex （此属性为必须）<br>父容器样式中的display属性设置为 flex 或 inline-flex。</li>\n<li>设置子元素 item对齐的属性 <ul>\n<li>justify-content：<br>控制所有item在main axis(主轴)上的对齐方式。<ul>\n<li>flex-start 默认值：item从 main axis(主轴)头部开始。</li>\n<li>flex-end：item从 main axis(主轴)尾部开始。</li>\n<li>center：item在 main axis(主轴)居中展示。</li>\n<li>space-between：item均匀的分布在 main axis(主轴)上，其中第一个在 main axis(主轴)头部，最后一个在 main axis(主轴)尾部。</li>\n<li>space-around：item分布在 main axis(主轴)上。每个item的左右间隔是相等的。如每个item左右间隔为15px，第1个item与开始初间隔15px，第1个与第2个item间隔30px。</li>\n<li>space-evenly：item均匀分布在 main axis(主轴)上。</li>\n<li><img src=\"https://i.loli.net/2019/10/19/wMk6LbDOfqBRAxo.png\" alt=\"1571479425_1_.jpg\"></li>\n</ul>\n</li>\n<li>align-content：<br>当 flex-wrap:wrap* 时(即item可以自动换行排列时才能用这个属性)，控制item在cross axis(交叉轴)上的对齐方式。<ul>\n<li>stretch 默认值：item高度撑开到整个cross axis(交叉轴)。</li>\n<li>flex-start：item头对齐在cross axis(交叉轴)的开始处。</li>\n<li>flex-end：item尾对齐在cross axis(交叉轴)的结尾处。</li>\n<li>center：item垂直居中。</li>\n<li>space-between：item均匀的分布在cross axis(交叉轴)上，其中第一个在cross axis(交叉轴)头部，最后一个在cross axis(交叉轴)尾部。</li>\n<li>space-around：item分布在cross axis(交叉轴)上。每个item的上下间隔是相等的。。如每个item上下间隔为15px，第1个item与开始初间隔15px，第1个与第2个item间隔30px。</li>\n<li><img src=\"https://i.loli.net/2019/10/19/fupD3dRWo5GStEO.png\" alt=\"1571479442_1_.jpg\"></li>\n</ul>\n</li>\n<li>align-items：<br>控制所有item在cross axis(交叉轴)的对齐方式。<ul>\n<li>stretch 默认值：item高度撑开到整个cross axis(交叉轴)。</li>\n<li>flex-start：item头对齐在cross axis(交叉轴)的开始处。</li>\n<li>flex-end：item尾对齐在cross axis(交叉轴)的结尾处。</li>\n<li>center：item垂直居中。</li>\n<li>baseline：根据内容基线对齐。</li>\n<li><img src=\"https://i.loli.net/2019/10/19/eKzM4IjCiRHg5qp.png\" alt=\"1571479433_1_.jpg\"></li>\n</ul>\n</li>\n<li>主轴与交叉轴<ul>\n<li>flex-direction/flow设置了row 或者 column的方向 【就是主轴方向，另一方向则为交叉轴】←👈这是重点！</li>\n<li><img src=\"https://i.loli.net/2019/10/19/lh1MsjEzTvJLS9u.png\" alt=\"1571479453_1_.jpg\"></li>\n<li>main axis /cross axis<br>(主轴)：指的是与flex-direction设定的值方向一致的轴，如flex-direction:row；那么主轴就是横轴。<br>(交叉轴)：与main axis(主轴)交叉的轴，如主轴为横轴，交叉轴就是纵轴。</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>flex-direction: row | row-reverse | column | column-reverse;<br> 设置item展示的方向<ul>\n<li>row 默认值：item显示在一行，从左到右依次展示。</li>\n<li>row-reverse：item显示在一行，从右到左依次展示。</li>\n<li>column：item显示在一列，从上到下依次展示。</li>\n<li>column-reverse：item显示在一列，从下到上依次展示。</li>\n<li><img src=\"https://i.loli.net/2019/10/19/JtGmFCEWif3zXlr.png\" alt=\"1571479463_1_.jpg\"></li>\n</ul>\n</li>\n<li>flex-wrap: nowrap | wrap | wrap-reverse;<br>当item在一行展示不下时，设置换行显示的方式。<ul>\n<li>nowrap 默认值：item不会换行。</li>\n<li>wrap：按照item本身的宽度展示，若当前行展示不下时会换一行展示。</li>\n<li>wrap-reverse：同wrap，不过是按相反方向换行展示item</li>\n<li><img src=\"https://i.loli.net/2019/10/19/pnqAah7bJoPVQz4.png\" alt=\"1571479471_1_.jpg\"></li>\n</ul>\n</li>\n<li>flex-flow:<br>是flex-direction flex-wrap 的简写方式两者的属性都可以混合用<ul>\n<li><img src=\"https://i.loli.net/2019/10/19/ZnACF9Ib3TvqgSE.png\" alt=\"1571479481_1_.jpg\"></li>\n</ul>\n</li>\n</ol>\n<h2 id=\"写在子元素的flex属性\"><a href=\"#写在子元素的flex属性\" class=\"headerlink\" title=\"写在子元素的flex属性\"></a>写在子元素的flex属性</h2><table>\n<thead>\n<tr>\n<th></th>\n<th></th>\n<th align=\"center\"></th>\n</tr>\n</thead>\n<tbody><tr>\n<td>order</td>\n<td>显示顺序</td>\n<td align=\"center\">type:”interger”，默认0</td>\n</tr>\n<tr>\n<td>flex-grow</td>\n<td>放大比例</td>\n<td align=\"center\">type:”Number”，默认0，即如果存在剩余空间，也不会放大；如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有剩余空间）；不同项目设置不同flex-grow属性值，根据设置的数据按比例分配剩余空间</td>\n</tr>\n<tr>\n<td>flex-shrink</td>\n<td>缩小比例</td>\n<td align=\"center\">type:”Number”，默认为1，即如果空间不足，项目将缩小；</td>\n</tr>\n<tr>\n<td>如果有一个项目的flex-shrink为0，空间不足时，它不缩小。</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n<tr>\n<td>不同项目设置不同flex-shrink属性值，根据设置的数据按比例缩小</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n<tr>\n<td>！注意：先根据宽度（当宽度超多定值时）再根据内容缩小</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n<tr>\n<td>flex-basis</td>\n<td>伸缩基准值</td>\n<td align=\"center\">flex-basis: auto number initial inherit</td>\n</tr>\n<tr>\n<td>基准值：自动(默认) 数值（100px） 初始 继承</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n<tr>\n<td>align-self</td>\n<td>纵轴方向对齐方式</td>\n<td align=\"center\">单个项目有与其他项目不一样的对齐方式，可覆盖align-items</td>\n</tr>\n<tr>\n<td>align-self： auto flex-start flex-end center baseline stretch”</td>\n<td></td>\n<td align=\"center\"></td>\n</tr>\n</tbody></table>\n<ol>\n<li><p>item的默认宽度、高度</p>\n<ul>\n<li>1)父容器设置了height，而item没有设置，那么item的height会填满父容器的height。因为默认情况下parent设置item的样式为align-items : stretch。</li>\n<li>2)父容器未设置height，某个item设置了height，其他item的height会等于item中最大的height。</li>\n<li>3)父容器和item都没有设置height，item会根据内容大小设置height，其他item的height会等于item中最大的height。</li>\n</ul>\n</li>\n<li><p>order: <integer>; /* default is 0 */可以控制item在父容器中展现的顺序。<br>order属性定义项目的排列顺序。数值越小（包含负值），排列越靠前，默认为0</integer></p>\n<ul>\n<li><a href=\"https://blog.csdn.net/qq_44607694/article/details/89762348\" target=\"_blank\" rel=\"noopener\">https://blog.csdn.net/qq_44607694/article/details/89762348</a></li>\n</ul>\n</li>\n<li><p>flex-basis: number | auto;<br>设置item的初始化大小。</p>\n<ul>\n<li><p>auto 默认值：根据内容区域的设置大小。</p>\n</li>\n<li><p>number ：可以为具体数字或百分比。</p>\n</li>\n<li><p>inherit ：从父元素继承该属性。</p>\n</li>\n<li><h2 id=\"Flex-Items的应用准则\"><a href=\"#Flex-Items的应用准则\" class=\"headerlink\" title=\"Flex Items的应用准则\"></a>Flex Items的应用准则</h2><ul>\n<li><p><strong>content –> width –> flex-basis (limted by max|min-width)</strong><br>也就是说，</p>\n</li>\n<li><p>如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小</p>\n</li>\n<li><p>如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小</p>\n</li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">item {</span><br><span class=\"line\"> width: 30px;</span><br><span class=\"line\"> flex-basis: 250px;</span><br><span class=\"line\">}此处的width将失效，宽会变成250px</span><br></pre></td></tr></table></figure>\n</li>\n<li><h2 id=\"使用max-width来限制flex-basis\"><a href=\"#使用max-width来限制flex-basis\" class=\"headerlink\" title=\"使用max-width来限制flex-basis\"></a>使用max-width来限制flex-basis</h2></li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">item {</span><br><span class=\"line\"> flex-basis: 250px;</span><br><span class=\"line\"> max-width: 100px;</span><br><span class=\"line\">}即使我们将flex-basis设置为250px，item的宽度还是被限制在了100px。所以最终的flex-basis是100px：</span><br><span class=\"line\"></span><br><span class=\"line\">同理用在 min-width</span><br></pre></td></tr></table></figure>\n\n\n\n\n\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n<ol start=\"4\">\n<li><p>flex-grow: <number>; /* default 0 */<br>指定item如何瓜分剩余空间。number 为0 表示不会增长<br> 1，表示所有 的item都会等比例的增长分配充剩余的空间：<br><img src=\"https://i.loli.net/2019/10/19/BRQTbwzpgld5oWK.png\" alt=\"1571479491_1_.jpg\"></number></p>\n</li>\n<li><p>flex-shrink: <number>; /* default 1 */<br>item缩减的占比,参考 grow 增，效果与之相反，如果item总宽度大于了父盒子，那么会按number的比例进行缩减/吸收</number></p>\n<ul>\n<li>算法参考：<br>容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px，子项2占用的基准空间是150px，子项3占用基准空间是100px，总基准空间为 250+150+100=500px。容器放不下，多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1)， 子项2 flex-shrink: 2，子项3 flex-shrink: 2。子项1需要吸收的的空间为 <code>(250*1)/(250*1+150*2+100*2) * 100 = 33.33px</code>，子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为<code>(150*2)/(250*1+150*2+100*2) * 100=40px</code>，子项2真实空间为 <code>150-40 = 110px</code>。子项3吸收的空间为<code>(100*2)/(250*1+150*2+100*2) * 100 = 26.67px</code>，真实的空间为<code>100-26.67=73.33px</code>。</li>\n</ul>\n</li>\n<li><p>flex<br>flex-grow flex-shrink flex-basis 的简写方式</p>\n<ul>\n<li>flex: flex-grow flex-shrink flex-basis;<br>默认值：0 1 auto</li>\n</ul>\n</li>\n</ol>\n<h2 id=\"一般自适应布局场景\"><a href=\"#一般自适应布局场景\" class=\"headerlink\" title=\"一般自适应布局场景\"></a>一般自适应布局场景</h2><ol>\n<li>左右<ul>\n<li><img src=\"https://i.loli.net/2019/10/19/sG57ZHuJoydINnk.png\" alt=\"1571497108_1_.jpg\"></li>\n<li><img src=\"https://i.loli.net/2019/10/19/MfQ1O34RDPXbsye.png\" alt=\"1571497099_1_.jpg\"></li>\n</ul>\n</li>\n<li>水平垂直居中<ul>\n<li><img src=\"https://i.loli.net/2019/10/19/sG57ZHuJoydINnk.png\" alt=\"1571497108_1_.jpg\"></li>\n</ul>\n</li>\n</ol>\n"},{"title":"CSS-animation动画2D与3D","date":"2019-06-22T14:48:55.000Z","top":1,"comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n\n\n[TOC]\n\n\n\n## 2D\n\n1. transform-origin可以调整元素转换变形的原点。\n\n - transform-origin: left top;\n transform: rotate(45deg);\n \n - \n\n2. 移动 translate(x, y) \n\n - 值为具体px或 自身百分比 此例为盒子横纵坐标居中\n \n\n3. 缩放 scale(x, y)\n\n - \n\n4. 旋转 rotate(deg) \n\n - \n\n5. 倾斜 skew(deg, deg)\n\n - \n ---\n\n\n\n\n\n---\n\n\n\n## 3D\n\n rotateX() ； rotateY() ； rotateZ()；\n\n- 分别是沿着 x；y ；z轴 立体旋转.\n\n translateX(x)； translateY(y)； translateZ(z)；translate3d(x,y,z)\n\n- 代表沿着X /Y /Z 轴移动。\n x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值。\n\n## \n\n## transition: 要过渡的属性 花费时间 运动曲线 何时开始; （放在要变化的元素本身(变化之前)）\n\n- 写法1 ：总体掌控耗时\n\n ```\n div{\n color: red;\n transition: 1s ease;\n 这里的transition:就控制了整个动画的时间为1S（包括所有的变化）\n }\n div{\n transform:rotate(7deg);\n color: blue;\n \n }\n ```\n\n \n\n- 写法2：单独设置某几项变化耗时状态等\n\n- \n\n## transform: 2D/3D的变化内容（元素的动画）\n\n- 注意transform里只装上述2D /3D 里的内容变化 什么width ,background-color这些跟在transform一个 地方就行\n\n- ```\n div{\n color: red;\n transition: 1s ease;\n 这里的transition:就控制了整个动画的时间为1S（包括所有的变化）\n }\n div{\n transform:rotate(7deg);\n color: blue;\n \n }\n ```\n\n## transform-style: preserve-3d; 设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）\n\n- 使用的前提是，动画是由3D 变化属性构成的\n 如果不用此属性，backface-visibility ：hidden 将会失效\n- \n- \n\n## perspective: number px 景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类） \n\n- 会以父元素的某个点为视点，看所有的子元素，所以看到的每个子元素的样式是不一样的。\n- 如果分别放在子类\n- transform: perspective(600px) rotateY(45deg); \n 另一种书写方式 \n\n## perspective-origin：20%，70% 透视的起点 方位 （一般放在父元素）\n\n\n\n\n\n## backface-visibility \n\n- backface-visibility 属性定义当元素不面向屏幕时是否可见。\n- backface-visibility: hidden; /* 不是正面对向屏幕，就隐藏（隐藏背面） */\n- 一般例子是 扑克牌，正面和背面不一样。\n\n\n\n## animation 动画 \n\n### animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;\n\n- animation-timing-function 运动曲线\n- 用关键词 \"from\" 和 \"to\"，等同于 0% 和 100%。\n infinite无限循环的意思\n- 动画按时间（百分比）阶段性的不同效果\n 如果不写到百分之百，那么剩下的时间 动画会倒放，比如此动画剩下百分之90的时间会慢动作倒放。\n \n\n### animation-play-state: paused; \n\n动画停止 默认: running\n\n","source":"_posts/CSS-animation动画2D与3D.md","raw":"---\ntitle: CSS-animation动画2D与3D\ndate: 2019-06-22 22:48:55\ntop: 1\ntags:\n - CSS\n - 动画\n - 前端\ncomments: true\n\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n\n\n[TOC]\n\n\n\n## 2D\n\n1. transform-origin可以调整元素转换变形的原点。\n\n - transform-origin: left top;\n transform: rotate(45deg);\n \n - \n\n2. 移动 translate(x, y) \n\n - 值为具体px或 自身百分比 此例为盒子横纵坐标居中\n \n\n3. 缩放 scale(x, y)\n\n - \n\n4. 旋转 rotate(deg) \n\n - \n\n5. 倾斜 skew(deg, deg)\n\n - \n ---\n\n\n\n\n\n---\n\n\n\n## 3D\n\n rotateX() ； rotateY() ； rotateZ()；\n\n- 分别是沿着 x；y ；z轴 立体旋转.\n\n translateX(x)； translateY(y)； translateZ(z)；translate3d(x,y,z)\n\n- 代表沿着X /Y /Z 轴移动。\n x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值。\n\n## \n\n## transition: 要过渡的属性 花费时间 运动曲线 何时开始; （放在要变化的元素本身(变化之前)）\n\n- 写法1 ：总体掌控耗时\n\n ```\n div{\n color: red;\n transition: 1s ease;\n 这里的transition:就控制了整个动画的时间为1S（包括所有的变化）\n }\n div{\n transform:rotate(7deg);\n color: blue;\n \n }\n ```\n\n \n\n- 写法2：单独设置某几项变化耗时状态等\n\n- \n\n## transform: 2D/3D的变化内容（元素的动画）\n\n- 注意transform里只装上述2D /3D 里的内容变化 什么width ,background-color这些跟在transform一个 地方就行\n\n- ```\n div{\n color: red;\n transition: 1s ease;\n 这里的transition:就控制了整个动画的时间为1S（包括所有的变化）\n }\n div{\n transform:rotate(7deg);\n color: blue;\n \n }\n ```\n\n## transform-style: preserve-3d; 设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）\n\n- 使用的前提是，动画是由3D 变化属性构成的\n 如果不用此属性，backface-visibility ：hidden 将会失效\n- \n- \n\n## perspective: number px 景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类） \n\n- 会以父元素的某个点为视点，看所有的子元素，所以看到的每个子元素的样式是不一样的。\n- 如果分别放在子类\n- transform: perspective(600px) rotateY(45deg); \n 另一种书写方式 \n\n## perspective-origin：20%，70% 透视的起点 方位 （一般放在父元素）\n\n\n\n\n\n## backface-visibility \n\n- backface-visibility 属性定义当元素不面向屏幕时是否可见。\n- backface-visibility: hidden; /* 不是正面对向屏幕，就隐藏（隐藏背面） */\n- 一般例子是 扑克牌，正面和背面不一样。\n\n\n\n## animation 动画 \n\n### animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;\n\n- animation-timing-function 运动曲线\n- 用关键词 \"from\" 和 \"to\"，等同于 0% 和 100%。\n infinite无限循环的意思\n- 动画按时间（百分比）阶段性的不同效果\n 如果不写到百分之百，那么剩下的时间 动画会倒放，比如此动画剩下百分之90的时间会慢动作倒放。\n \n\n### animation-play-state: paused; \n\n动画停止 默认: running\n\n","slug":"CSS-animation动画2D与3D","published":1,"_id":"ck1xqwsk30016c0tjo4m4m4dk","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"2D\"><a href=\"#2D\" class=\"headerlink\" title=\"2D\"></a>2D</h2><ol>\n<li><p>transform-origin可以调整元素转换变形的原点。</p>\n<ul>\n<li>transform-origin: left top;<br>transform: rotate(45deg);<br><img src=\"https://i.loli.net/2019/10/20/GxU9ruhHsl7Z3LD.png\" alt=\"1571500851_1_.jpg\"></li>\n<li><img src=\"https://i.loli.net/2019/10/20/unWwrKasGxplCI4.png\" alt=\"1571500862_1_.jpg\"></li>\n</ul>\n</li>\n<li><p>移动 translate(x, y) </p>\n<ul>\n<li>值为具体px或 自身百分比 此例为盒子横纵坐标居中<img src=\"https://i.loli.net/2019/10/20/3obyR7EGVrJWOv2.png\" alt=\"1571500870_1_.jpg\"></li>\n</ul>\n</li>\n</ol>\n<ol start=\"3\">\n<li><p>缩放 scale(x, y)</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/20/F6YEipfs5qXJkdV.png\" alt=\"1571500878_1_.jpg\"></li>\n</ul>\n</li>\n<li><p>旋转 rotate(deg) </p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/20/leO5EhAo9Xp43WS.png\" alt=\"1571500885_1_.jpg\"></li>\n</ul>\n</li>\n<li><p>倾斜 skew(deg, deg)</p>\n<ul>\n<li><h2 id><a href=\"#\" class=\"headerlink\" title></a><img src=\"https://i.loli.net/2019/10/20/Ir5hETJAoz1GmfS.png\" alt=\"1571500893_1_.jpg\"></h2></li>\n</ul>\n</li>\n</ol>\n<hr>\n<h2 id=\"3D\"><a href=\"#3D\" class=\"headerlink\" title=\"3D\"></a>3D</h2><p> rotateX() ； rotateY() ； rotateZ()；</p>\n<ul>\n<li><p>分别是沿着 x；y ；z轴 立体旋转.</p>\n<p>translateX(x)； translateY(y)； translateZ(z)；translate3d(x,y,z)</p>\n</li>\n<li><p>代表沿着X /Y /Z 轴移动。<br>x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值。</p>\n</li>\n</ul>\n<h2 id=\"-1\"><a href=\"#-1\" class=\"headerlink\" title></a></h2><h2 id=\"transition-要过渡的属性-花费时间-运动曲线-何时开始-（放在要变化的元素本身-变化之前-）\"><a href=\"#transition-要过渡的属性-花费时间-运动曲线-何时开始-（放在要变化的元素本身-变化之前-）\" class=\"headerlink\" title=\"transition: 要过渡的属性 花费时间 运动曲线 何时开始; （放在要变化的元素本身(变化之前)）\"></a>transition: 要过渡的属性 花费时间 运动曲线 何时开始; （放在要变化的元素本身(变化之前)）</h2><ul>\n<li><p>写法1 ：总体掌控耗时</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">div{</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\"> transition: 1s ease;</span><br><span class=\"line\"> 这里的transition:就控制了整个动画的时间为1S（包括所有的变化）</span><br><span class=\"line\">}</span><br><span class=\"line\">div{</span><br><span class=\"line\"> transform:rotate(7deg);</span><br><span class=\"line\"> color: blue;</span><br><span class=\"line\"></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n\n\n</li>\n</ul>\n<ul>\n<li><p>写法2：单独设置某几项变化耗时状态等<img src=\"https://i.loli.net/2019/10/20/POxB8SZnal6G3IH.png\" alt=\"1571501838_1_.jpg\"></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/20/BLASdRWMDl6YGUZ.png\" alt=\"1571501829_1_.jpg\"></p>\n</li>\n</ul>\n<h2 id=\"transform-2D-3D的变化内容（元素的动画）\"><a href=\"#transform-2D-3D的变化内容（元素的动画）\" class=\"headerlink\" title=\"transform: 2D/3D的变化内容（元素的动画）\"></a>transform: 2D/3D的变化内容（元素的动画）</h2><ul>\n<li><p>注意transform里只装上述2D /3D 里的内容变化 什么width ,background-color这些跟在transform一个 地方就行</p>\n</li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">div{</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\"> transition: 1s ease;</span><br><span class=\"line\"> 这里的transition:就控制了整个动画的时间为1S（包括所有的变化）</span><br><span class=\"line\">}</span><br><span class=\"line\">div{</span><br><span class=\"line\"> transform:rotate(7deg);</span><br><span class=\"line\"> color: blue;</span><br><span class=\"line\"></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n<h2 id=\"transform-style-preserve-3d-设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）\"><a href=\"#transform-style-preserve-3d-设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）\" class=\"headerlink\" title=\"transform-style: preserve-3d; 设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）\"></a>transform-style: preserve-3d; 设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）</h2><ul>\n<li>使用的前提是，动画是由3D 变化属性构成的<br>如果不用此属性，backface-visibility ：hidden 将会失效</li>\n<li><img src=\"https://i.loli.net/2019/10/20/IPSv4HGjqge3WZ1.png\" alt=\"1571501873_1_.jpg\"></li>\n<li><img src=\"https://i.loli.net/2019/10/20/fQdXsH1Rx8SFMgJ.png\" alt=\"1571501882_1_.jpg\"></li>\n</ul>\n<h2 id=\"perspective-number-px-景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类）\"><a href=\"#perspective-number-px-景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类）\" class=\"headerlink\" title=\"perspective: number px 景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类）\"></a>perspective: number px 景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类）</h2><ul>\n<li>会以父元素的某个点为视点，看所有的子元素，所以看到的每个子元素的样式是不一样的。<img src=\"https://i.loli.net/2019/10/20/xOszR8r5em4g2ki.png\" alt=\"1571501900_1_.jpg\"></li>\n<li>如果分别放在子类<img src=\"https://i.loli.net/2019/10/20/kOqosQNUwFcTWtp.png\" alt=\"1571501908_1_.jpg\"></li>\n<li>transform: perspective(600px) rotateY(45deg);<br>另一种书写方式 </li>\n</ul>\n<h2 id=\"perspective-origin：20-，70-透视的起点-方位-（一般放在父元素）\"><a href=\"#perspective-origin：20-，70-透视的起点-方位-（一般放在父元素）\" class=\"headerlink\" title=\"perspective-origin：20%，70% 透视的起点 方位 （一般放在父元素）\"></a>perspective-origin：20%，70% 透视的起点 方位 （一般放在父元素）</h2><p><img src=\"https://i.loli.net/2019/10/20/4vjtGdsBroNqfUP.png\" alt=\"1571501917_1_.jpg\"></p>\n<h2 id=\"backface-visibility\"><a href=\"#backface-visibility\" class=\"headerlink\" title=\"backface-visibility\"></a>backface-visibility</h2><ul>\n<li>backface-visibility 属性定义当元素不面向屏幕时是否可见。</li>\n<li>backface-visibility: hidden; /* 不是正面对向屏幕，就隐藏（隐藏背面） */</li>\n<li>一般例子是 扑克牌，正面和背面不一样。</li>\n</ul>\n<h2 id=\"animation-动画\"><a href=\"#animation-动画\" class=\"headerlink\" title=\"animation 动画\"></a>animation 动画</h2><h3 id=\"animation-动画名称-动画时间-运动曲线-何时开始-播放次数-是否反方向\"><a href=\"#animation-动画名称-动画时间-运动曲线-何时开始-播放次数-是否反方向\" class=\"headerlink\" title=\"animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;\"></a>animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;</h3><ul>\n<li>animation-timing-function 运动曲线<img src=\"https://i.loli.net/2019/10/20/NlxUwQgDecZFTXd.png\" alt=\"1571503338_1_.jpg\"></li>\n<li>用关键词 “from” 和 “to”，等同于 0% 和 100%。<img src=\"https://i.loli.net/2019/10/20/i5Ar3ZOJ7hYCFbD.png\" alt=\"1571503348_1_.jpg\"><br>infinite无限循环的意思</li>\n<li>动画按时间（百分比）阶段性的不同效果<img src=\"https://i.loli.net/2019/10/20/hjMf5Gm7wCluNId.png\" alt=\"1571503356_1_.jpg\"><br>如果不写到百分之百，那么剩下的时间 动画会倒放，比如此动画剩下百分之90的时间会慢动作倒放。<br><img src=\"https://i.loli.net/2019/10/20/9GjUJStPqMXAFmb.png\" alt=\"1571503364_1_.jpg\"></li>\n</ul>\n<h3 id=\"animation-play-state-paused\"><a href=\"#animation-play-state-paused\" class=\"headerlink\" title=\"animation-play-state: paused;\"></a>animation-play-state: paused;</h3><p>动画停止 默认: running</p>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"2D\"><a href=\"#2D\" class=\"headerlink\" title=\"2D\"></a>2D</h2><ol>\n<li><p>transform-origin可以调整元素转换变形的原点。</p>\n<ul>\n<li>transform-origin: left top;<br>transform: rotate(45deg);<br><img src=\"https://i.loli.net/2019/10/20/GxU9ruhHsl7Z3LD.png\" alt=\"1571500851_1_.jpg\"></li>\n<li><img src=\"https://i.loli.net/2019/10/20/unWwrKasGxplCI4.png\" alt=\"1571500862_1_.jpg\"></li>\n</ul>\n</li>\n<li><p>移动 translate(x, y) </p>\n<ul>\n<li>值为具体px或 自身百分比 此例为盒子横纵坐标居中<img src=\"https://i.loli.net/2019/10/20/3obyR7EGVrJWOv2.png\" alt=\"1571500870_1_.jpg\"></li>\n</ul>\n</li>\n</ol>\n<ol start=\"3\">\n<li><p>缩放 scale(x, y)</p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/20/F6YEipfs5qXJkdV.png\" alt=\"1571500878_1_.jpg\"></li>\n</ul>\n</li>\n<li><p>旋转 rotate(deg) </p>\n<ul>\n<li><img src=\"https://i.loli.net/2019/10/20/leO5EhAo9Xp43WS.png\" alt=\"1571500885_1_.jpg\"></li>\n</ul>\n</li>\n<li><p>倾斜 skew(deg, deg)</p>\n<ul>\n<li><h2 id><a href=\"#\" class=\"headerlink\" title></a><img src=\"https://i.loli.net/2019/10/20/Ir5hETJAoz1GmfS.png\" alt=\"1571500893_1_.jpg\"></h2></li>\n</ul>\n</li>\n</ol>\n<hr>\n<h2 id=\"3D\"><a href=\"#3D\" class=\"headerlink\" title=\"3D\"></a>3D</h2><p> rotateX() ； rotateY() ； rotateZ()；</p>\n<ul>\n<li><p>分别是沿着 x；y ；z轴 立体旋转.</p>\n<p>translateX(x)； translateY(y)； translateZ(z)；translate3d(x,y,z)</p>\n</li>\n<li><p>代表沿着X /Y /Z 轴移动。<br>x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值。</p>\n</li>\n</ul>\n<h2 id=\"-1\"><a href=\"#-1\" class=\"headerlink\" title></a></h2><h2 id=\"transition-要过渡的属性-花费时间-运动曲线-何时开始-（放在要变化的元素本身-变化之前-）\"><a href=\"#transition-要过渡的属性-花费时间-运动曲线-何时开始-（放在要变化的元素本身-变化之前-）\" class=\"headerlink\" title=\"transition: 要过渡的属性 花费时间 运动曲线 何时开始; （放在要变化的元素本身(变化之前)）\"></a>transition: 要过渡的属性 花费时间 运动曲线 何时开始; （放在要变化的元素本身(变化之前)）</h2><ul>\n<li><p>写法1 ：总体掌控耗时</p>\n<figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">div{</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\"> transition: 1s ease;</span><br><span class=\"line\"> 这里的transition:就控制了整个动画的时间为1S（包括所有的变化）</span><br><span class=\"line\">}</span><br><span class=\"line\">div{</span><br><span class=\"line\"> transform:rotate(7deg);</span><br><span class=\"line\"> color: blue;</span><br><span class=\"line\"></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n\n\n</li>\n</ul>\n<ul>\n<li><p>写法2：单独设置某几项变化耗时状态等<img src=\"https://i.loli.net/2019/10/20/POxB8SZnal6G3IH.png\" alt=\"1571501838_1_.jpg\"></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/20/BLASdRWMDl6YGUZ.png\" alt=\"1571501829_1_.jpg\"></p>\n</li>\n</ul>\n<h2 id=\"transform-2D-3D的变化内容（元素的动画）\"><a href=\"#transform-2D-3D的变化内容（元素的动画）\" class=\"headerlink\" title=\"transform: 2D/3D的变化内容（元素的动画）\"></a>transform: 2D/3D的变化内容（元素的动画）</h2><ul>\n<li><p>注意transform里只装上述2D /3D 里的内容变化 什么width ,background-color这些跟在transform一个 地方就行</p>\n</li>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">div{</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\"> transition: 1s ease;</span><br><span class=\"line\"> 这里的transition:就控制了整个动画的时间为1S（包括所有的变化）</span><br><span class=\"line\">}</span><br><span class=\"line\">div{</span><br><span class=\"line\"> transform:rotate(7deg);</span><br><span class=\"line\"> color: blue;</span><br><span class=\"line\"></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n</li>\n</ul>\n<h2 id=\"transform-style-preserve-3d-设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）\"><a href=\"#transform-style-preserve-3d-设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）\" class=\"headerlink\" title=\"transform-style: preserve-3d; 设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）\"></a>transform-style: preserve-3d; 设置平面图有3D效果（会出现交叉碰撞）（一般放在父元素）</h2><ul>\n<li>使用的前提是，动画是由3D 变化属性构成的<br>如果不用此属性，backface-visibility ：hidden 将会失效</li>\n<li><img src=\"https://i.loli.net/2019/10/20/IPSv4HGjqge3WZ1.png\" alt=\"1571501873_1_.jpg\"></li>\n<li><img src=\"https://i.loli.net/2019/10/20/fQdXsH1Rx8SFMgJ.png\" alt=\"1571501882_1_.jpg\"></li>\n</ul>\n<h2 id=\"perspective-number-px-景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类）\"><a href=\"#perspective-number-px-景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类）\" class=\"headerlink\" title=\"perspective: number px 景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类）\"></a>perspective: number px 景深：透视距离，调整3D效果数值越大越不明显，（一般放在在父类）</h2><ul>\n<li>会以父元素的某个点为视点，看所有的子元素，所以看到的每个子元素的样式是不一样的。<img src=\"https://i.loli.net/2019/10/20/xOszR8r5em4g2ki.png\" alt=\"1571501900_1_.jpg\"></li>\n<li>如果分别放在子类<img src=\"https://i.loli.net/2019/10/20/kOqosQNUwFcTWtp.png\" alt=\"1571501908_1_.jpg\"></li>\n<li>transform: perspective(600px) rotateY(45deg);<br>另一种书写方式 </li>\n</ul>\n<h2 id=\"perspective-origin：20-，70-透视的起点-方位-（一般放在父元素）\"><a href=\"#perspective-origin：20-，70-透视的起点-方位-（一般放在父元素）\" class=\"headerlink\" title=\"perspective-origin：20%，70% 透视的起点 方位 （一般放在父元素）\"></a>perspective-origin：20%，70% 透视的起点 方位 （一般放在父元素）</h2><p><img src=\"https://i.loli.net/2019/10/20/4vjtGdsBroNqfUP.png\" alt=\"1571501917_1_.jpg\"></p>\n<h2 id=\"backface-visibility\"><a href=\"#backface-visibility\" class=\"headerlink\" title=\"backface-visibility\"></a>backface-visibility</h2><ul>\n<li>backface-visibility 属性定义当元素不面向屏幕时是否可见。</li>\n<li>backface-visibility: hidden; /* 不是正面对向屏幕，就隐藏（隐藏背面） */</li>\n<li>一般例子是 扑克牌，正面和背面不一样。</li>\n</ul>\n<h2 id=\"animation-动画\"><a href=\"#animation-动画\" class=\"headerlink\" title=\"animation 动画\"></a>animation 动画</h2><h3 id=\"animation-动画名称-动画时间-运动曲线-何时开始-播放次数-是否反方向\"><a href=\"#animation-动画名称-动画时间-运动曲线-何时开始-播放次数-是否反方向\" class=\"headerlink\" title=\"animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;\"></a>animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;</h3><ul>\n<li>animation-timing-function 运动曲线<img src=\"https://i.loli.net/2019/10/20/NlxUwQgDecZFTXd.png\" alt=\"1571503338_1_.jpg\"></li>\n<li>用关键词 “from” 和 “to”，等同于 0% 和 100%。<img src=\"https://i.loli.net/2019/10/20/i5Ar3ZOJ7hYCFbD.png\" alt=\"1571503348_1_.jpg\"><br>infinite无限循环的意思</li>\n<li>动画按时间（百分比）阶段性的不同效果<img src=\"https://i.loli.net/2019/10/20/hjMf5Gm7wCluNId.png\" alt=\"1571503356_1_.jpg\"><br>如果不写到百分之百，那么剩下的时间 动画会倒放，比如此动画剩下百分之90的时间会慢动作倒放。<br><img src=\"https://i.loli.net/2019/10/20/9GjUJStPqMXAFmb.png\" alt=\"1571503364_1_.jpg\"></li>\n</ul>\n<h3 id=\"animation-play-state-paused\"><a href=\"#animation-play-state-paused\" class=\"headerlink\" title=\"animation-play-state: paused;\"></a>animation-play-state: paused;</h3><p>动画停止 默认: running</p>\n"},{"title":"AJAX基础","date":"2019-04-06T01:30:34.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_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\nAJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。\n\n## AJAX原生get/post请求\n\n- \n\n \n\n # JQUERY写法\n\n - \n - \n\n - JSONP请求跨域\n\n - jsonp: 回掉函数的参数的名，默认callback，服务端通过它来获取到回掉函数名，并带着结果一起返回到客户端\n jsonpCallback: 回掉函数名，默认jquery自动生成\n 指定jsonpCallback时可以将回掉函数写在ajax外面做其他操作，不指定时不能这样做，只能在success里做操作\n - getJSON(url,[data],[callback])\n - load() 方法\n - jQuery load() 方法是简单但强大的 AJAX 方法。\n - load() 方法从服务器加载数据，并把返回的数据放入被选元素中。\n - $(selector).load(URL,data,callback);\n\n \n\n","source":"_posts/AJAX基础.md","raw":"---\ntitle: AJAX基础\ndate: 2019-04-06 09:30:34\ntags:\n - AJAX\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\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\nAJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。\n\n## AJAX原生get/post请求\n\n- \n\n \n\n # JQUERY写法\n\n - \n - \n\n - JSONP请求跨域\n\n - jsonp: 回掉函数的参数的名，默认callback，服务端通过它来获取到回掉函数名，并带着结果一起返回到客户端\n jsonpCallback: 回掉函数名，默认jquery自动生成\n 指定jsonpCallback时可以将回掉函数写在ajax外面做其他操作，不指定时不能这样做，只能在success里做操作\n - getJSON(url,[data],[callback])\n - load() 方法\n - jQuery load() 方法是简单但强大的 AJAX 方法。\n - load() 方法从服务器加载数据，并把返回的数据放入被选元素中。\n - $(selector).load(URL,data,callback);\n\n \n\n","slug":"AJAX基础","published":1,"_id":"ck1xt97fl001dc0tj5opsnaw6","layout":"post","photos":[],"link":"","content":"<h2 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h2><p>AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。</p>\n<h2 id=\"AJAX原生get-post请求\"><a href=\"#AJAX原生get-post请求\" class=\"headerlink\" title=\"AJAX原生get/post请求\"></a>AJAX原生get/post请求</h2><ul>\n<li><img src=\"https://i.loli.net/2019/10/20/wULdjvnBktqhu8e.png\" alt=\"1571504678_1_.jpg\"></li>\n</ul>\n<h1 id=\"JQUERY写法\"><a href=\"#JQUERY写法\" class=\"headerlink\" title=\"JQUERY写法\"></a>JQUERY写法</h1><ul>\n<li><p><img src=\"https://i.loli.net/2019/10/20/98hvRctL6rNMJeH.png\" alt=\"1571504689_1_.jpg\"></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/20/7rjYEUigbVZdCck.png\" alt=\"img\"></p>\n</li>\n<li><p>JSONP请求跨域</p>\n<ul>\n<li>jsonp: 回掉函数的参数的名，默认callback，服务端通过它来获取到回掉函数名，并带着结果一起返回到客户端<br>jsonpCallback: 回掉函数名，默认jquery自动生成<br>指定jsonpCallback时可以将回掉函数写在ajax外面做其他操作，不指定时不能这样做，只能在success里做操作<img src=\"https://i.loli.net/2019/10/20/lAI6WEpcvHmksBU.png\" alt=\"1571504713_1_.jpg\"></li>\n<li>getJSON(url,[data],[callback])<img src=\"https://i.loli.net/2019/10/20/W4fbznloJuh5S2V.png\" alt=\"1571504721_1_.jpg\"></li>\n<li>load() 方法<ul>\n<li>jQuery load() 方法是简单但强大的 AJAX 方法。</li>\n<li>load() 方法从服务器加载数据，并把返回的数据放入被选元素中。</li>\n<li>$(selector).load(URL,data,callback);</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h2><p>AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。</p>\n<h2 id=\"AJAX原生get-post请求\"><a href=\"#AJAX原生get-post请求\" class=\"headerlink\" title=\"AJAX原生get/post请求\"></a>AJAX原生get/post请求</h2><ul>\n<li><img src=\"https://i.loli.net/2019/10/20/wULdjvnBktqhu8e.png\" alt=\"1571504678_1_.jpg\"></li>\n</ul>\n<h1 id=\"JQUERY写法\"><a href=\"#JQUERY写法\" class=\"headerlink\" title=\"JQUERY写法\"></a>JQUERY写法</h1><ul>\n<li><p><img src=\"https://i.loli.net/2019/10/20/98hvRctL6rNMJeH.png\" alt=\"1571504689_1_.jpg\"></p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/20/7rjYEUigbVZdCck.png\" alt=\"img\"></p>\n</li>\n<li><p>JSONP请求跨域</p>\n<ul>\n<li>jsonp: 回掉函数的参数的名，默认callback，服务端通过它来获取到回掉函数名，并带着结果一起返回到客户端<br>jsonpCallback: 回掉函数名，默认jquery自动生成<br>指定jsonpCallback时可以将回掉函数写在ajax外面做其他操作，不指定时不能这样做，只能在success里做操作<img src=\"https://i.loli.net/2019/10/20/lAI6WEpcvHmksBU.png\" alt=\"1571504713_1_.jpg\"></li>\n<li>getJSON(url,[data],[callback])<img src=\"https://i.loli.net/2019/10/20/W4fbznloJuh5S2V.png\" alt=\"1571504721_1_.jpg\"></li>\n<li>load() 方法<ul>\n<li>jQuery load() 方法是简单但强大的 AJAX 方法。</li>\n<li>load() 方法从服务器加载数据，并把返回的数据放入被选元素中。</li>\n<li>$(selector).load(URL,data,callback);</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n"},{"title":"HTML5 应用程序缓存 manifest","date":"2019-10-09T01:33:17.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n\n\n## 应用程序缓存为应用带来三个优势：\n\n1. 离线浏览 - 用户可在应用离线时使用它们\n2. 速度 - 已缓存资源加载得更快\n3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源\n\n## 如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性\n\n- <!DOCTYPE HTML>\n <html manifest=\"demo.appcache\">\n ...\n </html>\n 告诉html要缓存此网页\n 加载manifest配置文件 离线内容\n\n- manifest 文件的建议文件扩展名是：\".appcache\"。\n\n## manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。\n\n- manifest 文件有三个部分：\n - CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存\n - NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存\n - FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）\n\n\n\n## 更新缓存\n\n1. 一旦应用被缓存，它就会保持缓存直到发生下列情况：\n - 用户清空浏览器缓存\n - manifest 文件被修改（参阅下面的提示）\n - 由程序来更新应用缓存\n\n","source":"_posts/HTML5 应用程序缓存 manifest.md","raw":"---\ntitle: HTML5 应用程序缓存 manifest\ndate: 2019-10-09 09:33:17\ntags:\n - HTML\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n\n\n## 应用程序缓存为应用带来三个优势：\n\n1. 离线浏览 - 用户可在应用离线时使用它们\n2. 速度 - 已缓存资源加载得更快\n3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源\n\n## 如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性\n\n- <!DOCTYPE HTML>\n <html manifest=\"demo.appcache\">\n ...\n </html>\n 告诉html要缓存此网页\n 加载manifest配置文件 离线内容\n\n- manifest 文件的建议文件扩展名是：\".appcache\"。\n\n## manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。\n\n- manifest 文件有三个部分：\n - CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存\n - NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存\n - FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）\n\n\n\n## 更新缓存\n\n1. 一旦应用被缓存，它就会保持缓存直到发生下列情况：\n - 用户清空浏览器缓存\n - manifest 文件被修改（参阅下面的提示）\n - 由程序来更新应用缓存\n\n","slug":"HTML5 应用程序缓存 manifest","published":1,"_id":"ck1xv7d8u001jc0tj5hvqxebv","layout":"post","photos":[],"link":"","content":"<h2 id=\"应用程序缓存为应用带来三个优势：\"><a href=\"#应用程序缓存为应用带来三个优势：\" class=\"headerlink\" title=\"应用程序缓存为应用带来三个优势：\"></a>应用程序缓存为应用带来三个优势：</h2><ol>\n<li>离线浏览 - 用户可在应用离线时使用它们</li>\n<li>速度 - 已缓存资源加载得更快</li>\n<li>减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源</li>\n</ol>\n<h2 id=\"如需启用应用程序缓存，请在文档的-标签中包含-manifest-属性\"><a href=\"#如需启用应用程序缓存，请在文档的-标签中包含-manifest-属性\" class=\"headerlink\" title=\"如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性\"></a>如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性</html></h2><ul>\n<li><!DOCTYPE HTML>\n<html manifest=\"demo.appcache\">\n...\n</html>\n告诉html要缓存此网页\n加载manifest配置文件 离线内容\n</li>\n<li><p>manifest 文件的建议文件扩展名是：”.appcache”。</p>\n</li>\n</ul>\n<h2 id=\"manifest-文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。\"><a href=\"#manifest-文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。\" class=\"headerlink\" title=\"manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。\"></a>manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。</h2><ul>\n<li>manifest 文件有三个部分：<ul>\n<li>CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存<img src=\"https://i.loli.net/2019/10/20/1BazOu3NrKVTJi6.png\" alt=\"1571508093_1_.jpg\"></li>\n<li>NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存<img src=\"https://i.loli.net/2019/10/20/FQWYeyoL94tMDOm.png\" alt=\"1571508102_1_.jpg\"></li>\n<li>FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）<img src=\"https://i.loli.net/2019/10/20/PxijL5nb9agemDW.png\" alt=\"1571508111_1_.jpg\"></li>\n</ul>\n</li>\n</ul>\n<p><img src=\"https://i.loli.net/2019/10/20/RFgS6py8kCZivOn.png\" alt=\"1571508162_1_.jpg\"></p>\n<h2 id=\"更新缓存\"><a href=\"#更新缓存\" class=\"headerlink\" title=\"更新缓存\"></a>更新缓存</h2><ol>\n<li>一旦应用被缓存，它就会保持缓存直到发生下列情况：<ul>\n<li>用户清空浏览器缓存</li>\n<li>manifest 文件被修改（参阅下面的提示）</li>\n<li>由程序来更新应用缓存</li>\n</ul>\n</li>\n</ol>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"应用程序缓存为应用带来三个优势：\"><a href=\"#应用程序缓存为应用带来三个优势：\" class=\"headerlink\" title=\"应用程序缓存为应用带来三个优势：\"></a>应用程序缓存为应用带来三个优势：</h2><ol>\n<li>离线浏览 - 用户可在应用离线时使用它们</li>\n<li>速度 - 已缓存资源加载得更快</li>\n<li>减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源</li>\n</ol>\n<h2 id=\"如需启用应用程序缓存，请在文档的-标签中包含-manifest-属性\"><a href=\"#如需启用应用程序缓存，请在文档的-标签中包含-manifest-属性\" class=\"headerlink\" title=\"如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性\"></a>如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性</html></h2><ul>\n<li><!DOCTYPE HTML>\n<html manifest=\"demo.appcache\">\n...\n</html>\n告诉html要缓存此网页\n加载manifest配置文件 离线内容\n</li>\n<li><p>manifest 文件的建议文件扩展名是：”.appcache”。</p>\n</li>\n</ul>\n<h2 id=\"manifest-文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。\"><a href=\"#manifest-文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。\" class=\"headerlink\" title=\"manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。\"></a>manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。</h2><ul>\n<li>manifest 文件有三个部分：<ul>\n<li>CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存<img src=\"https://i.loli.net/2019/10/20/1BazOu3NrKVTJi6.png\" alt=\"1571508093_1_.jpg\"></li>\n<li>NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存<img src=\"https://i.loli.net/2019/10/20/FQWYeyoL94tMDOm.png\" alt=\"1571508102_1_.jpg\"></li>\n<li>FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）<img src=\"https://i.loli.net/2019/10/20/PxijL5nb9agemDW.png\" alt=\"1571508111_1_.jpg\"></li>\n</ul>\n</li>\n</ul>\n<p><img src=\"https://i.loli.net/2019/10/20/RFgS6py8kCZivOn.png\" alt=\"1571508162_1_.jpg\"></p>\n<h2 id=\"更新缓存\"><a href=\"#更新缓存\" class=\"headerlink\" title=\"更新缓存\"></a>更新缓存</h2><ol>\n<li>一旦应用被缓存，它就会保持缓存直到发生下列情况：<ul>\n<li>用户清空浏览器缓存</li>\n<li>manifest 文件被修改（参阅下面的提示）</li>\n<li>由程序来更新应用缓存</li>\n</ul>\n</li>\n</ol>\n"},{"title":"json字符串、json对象、数组 三者之间的转换","date":"2019-08-15T15:20:53.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\njson字符串：let jsonStr = '[{\"id\":\"01\",\"open\":false,\"pId\":\"0\",\"name\":\"A部门\"},{\"id\":\"01\",\"open\":false,\"pId\":\"0\",\"name\":\"A部门\"},]'\n\n- var jsonObj = JSON.parse(jsonStr)//json 字符串转化成json对象（原生方法）\n- let jsonStr1 = JSON.stringify(jsonObj) json对象转化成json字符串- \n\n- json对象转化成json数组对象\n\n - ```\n let arr1=[];\n for(let i in jsonObj){\n arr1.push(jsonObj[i]);\n }\n ```\n\n- json数组转化成json字符串\n\n - ```javascript\n var jsonStr11 = JSON.stringify(arr1)\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\njson字符串：let jsonStr = '[{\"id\":\"01\",\"open\":false,\"pId\":\"0\",\"name\":\"A部门\"},{\"id\":\"01\",\"open\":false,\"pId\":\"0\",\"name\":\"A部门\"},]'\n\n","source":"_posts/json字符串、json对象、数组 三者之间的转换.md","raw":"---\ntitle: json字符串、json对象、数组 三者之间的转换\ndate: 2019-08-15 23:20:53\ntags:\n - JavaScript\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n\n---\n\n\n\njson字符串：let jsonStr = '[{\"id\":\"01\",\"open\":false,\"pId\":\"0\",\"name\":\"A部门\"},{\"id\":\"01\",\"open\":false,\"pId\":\"0\",\"name\":\"A部门\"},]'\n\n- var jsonObj = JSON.parse(jsonStr)//json 字符串转化成json对象（原生方法）\n- let jsonStr1 = JSON.stringify(jsonObj) json对象转化成json字符串- \n\n- json对象转化成json数组对象\n\n - ```\n let arr1=[];\n for(let i in jsonObj){\n arr1.push(jsonObj[i]);\n }\n ```\n\n- json数组转化成json字符串\n\n - ```javascript\n var jsonStr11 = JSON.stringify(arr1)\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\njson字符串：let jsonStr = '[{\"id\":\"01\",\"open\":false,\"pId\":\"0\",\"name\":\"A部门\"},{\"id\":\"01\",\"open\":false,\"pId\":\"0\",\"name\":\"A部门\"},]'\n\n","slug":"json字符串、json对象、数组 三者之间的转换","published":1,"_id":"ck1xvxc7d001pc0tj7hxzbrlw","layout":"post","photos":[],"link":"","content":"<p>json字符串：let jsonStr = ‘[{“id”:”01”,”open”:false,”pId”:”0”,”name”:”A部门”},{“id”:”01”,”open”:false,”pId”:”0”,”name”:”A部门”},]’</p>\n<ul>\n<li><p>var jsonObj = JSON.parse(jsonStr)//json 字符串转化成json对象（原生方法）</p>\n</li>\n<li><p>let jsonStr1 = JSON.stringify(jsonObj) json对象转化成json字符串- </p>\n</li>\n<li><p>json对象转化成json数组对象</p>\n<ul>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">let arr1=[];</span><br><span class=\"line\">for(let i in jsonObj){</span><br><span class=\"line\"> arr1.push(jsonObj[i]);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n</ul>\n</li>\n<li><p>json数组转化成json字符串</p>\n<ul>\n<li><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> jsonStr11 = <span class=\"built_in\">JSON</span>.stringify(arr1)</span><br></pre></td></tr></table></figure>\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</li>\n</ul>\n</li>\n</ul>\n<p>json字符串：let jsonStr = ‘[{“id”:”01”,”open”:false,”pId”:”0”,”name”:”A部门”},{“id”:”01”,”open”:false,”pId”:”0”,”name”:”A部门”},]’</p>\n","site":{"data":{}},"excerpt":"","more":"<p>json字符串：let jsonStr = ‘[{“id”:”01”,”open”:false,”pId”:”0”,”name”:”A部门”},{“id”:”01”,”open”:false,”pId”:”0”,”name”:”A部门”},]’</p>\n<ul>\n<li><p>var jsonObj = JSON.parse(jsonStr)//json 字符串转化成json对象（原生方法）</p>\n</li>\n<li><p>let jsonStr1 = JSON.stringify(jsonObj) json对象转化成json字符串- </p>\n</li>\n<li><p>json对象转化成json数组对象</p>\n<ul>\n<li><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">let arr1=[];</span><br><span class=\"line\">for(let i in jsonObj){</span><br><span class=\"line\"> arr1.push(jsonObj[i]);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n</li>\n</ul>\n</li>\n<li><p>json数组转化成json字符串</p>\n<ul>\n<li><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> jsonStr11 = <span class=\"built_in\">JSON</span>.stringify(arr1)</span><br></pre></td></tr></table></figure>\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</li>\n</ul>\n</li>\n</ul>\n<p>json字符串：let jsonStr = ‘[{“id”:”01”,”open”:false,”pId”:”0”,”name”:”A部门”},{“id”:”01”,”open”:false,”pId”:”0”,”name”:”A部门”},]’</p>\n"},{"title":"跨域以及跨域的方法","date":"2019-10-06T14:27:55.000Z","top":6,"comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n[TOC]\n\n\n\n\n\n\n\n## 什么是跨域\n\n由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：\n\n- 网络协议不同，如http协议访问https协议。\n- 端口不同，如80端口访问8080端口。\n- 域名不同，如qianduanblog.com访问baidu.com。\n- 子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。\n- 域名和域名对应ip,如www.a.com访问20.205.28.90.\n\n## 跨域请求的安全问题\n\n- CRSF攻击\n\n - 什么是CRSF攻击\n - CSRF漏洞检测：检测CSRF漏洞是一项比较繁琐的工作，最简单的方法就是抓取一个正常请求的数据包，\n 去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。\n - 目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。\n - （1）验证 HTTP Referer 字段 ----IE老的浏览器危险\n - （2）在请求地址中添加 token 并验证\n - （3）在 HTTP 头中自定义属性并验证\n\n## 同源策略\n\n - 一个源的定义\n - 什么是同源策略\n - 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。\n - 同源策略限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。\n\n## 不受同源策略限制的请求方式\n\n - \n\n - 1.是不拿资源的单纯的页面跳转\n - 2.就是jsonp的简单实现模式，利用sript引用，或者说是JSONP的原型：创建一个回调函数，\n 然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。\n https://www.cnblogs.com/rain-chenwei/p/9520240.html\n\n## jsonp怎么实现的跨域\n\n - 通过script标签的跨域特性来绕过同源策略拿到想要的数据\n 就是jsonp的简单实现模式，或者说是JSONP的原型：创建一个回调函数，\n 然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。\n https://www.cnblogs.com/rain-chenwei/p/9520240.html\n\n## 真正完全解决跨域问题 能用上post请求，还得靠后端设置允许\n\n - 上面的方式只能get请求/安全系数不够高\n - 后端设置这样后 即可\n\n\n\n","source":"_posts/跨域以及跨域的方法.md","raw":"---\ntitle: 跨域以及跨域的方法\ndate: 2019-10-06 22:27:55\ntop: 6\ntags:\n - JavaScript\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n[TOC]\n\n\n\n\n\n\n\n## 什么是跨域\n\n由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：\n\n- 网络协议不同，如http协议访问https协议。\n- 端口不同，如80端口访问8080端口。\n- 域名不同，如qianduanblog.com访问baidu.com。\n- 子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。\n- 域名和域名对应ip,如www.a.com访问20.205.28.90.\n\n## 跨域请求的安全问题\n\n- CRSF攻击\n\n - 什么是CRSF攻击\n - CSRF漏洞检测：检测CSRF漏洞是一项比较繁琐的工作，最简单的方法就是抓取一个正常请求的数据包，\n 去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。\n - 目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。\n - （1）验证 HTTP Referer 字段 ----IE老的浏览器危险\n - （2）在请求地址中添加 token 并验证\n - （3）在 HTTP 头中自定义属性并验证\n\n## 同源策略\n\n - 一个源的定义\n - 什么是同源策略\n - 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。\n - 同源策略限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。\n\n## 不受同源策略限制的请求方式\n\n - \n\n - 1.是不拿资源的单纯的页面跳转\n - 2.就是jsonp的简单实现模式，利用sript引用，或者说是JSONP的原型：创建一个回调函数，\n 然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。\n https://www.cnblogs.com/rain-chenwei/p/9520240.html\n\n## jsonp怎么实现的跨域\n\n - 通过script标签的跨域特性来绕过同源策略拿到想要的数据\n 就是jsonp的简单实现模式，或者说是JSONP的原型：创建一个回调函数，\n 然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。\n https://www.cnblogs.com/rain-chenwei/p/9520240.html\n\n## 真正完全解决跨域问题 能用上post请求，还得靠后端设置允许\n\n - 上面的方式只能get请求/安全系数不够高\n - 后端设置这样后 即可\n\n\n\n","slug":"跨域以及跨域的方法","published":1,"_id":"ck1xw4mba001vc0tjkhgg8v4k","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"什么是跨域\"><a href=\"#什么是跨域\" class=\"headerlink\" title=\"什么是跨域\"></a>什么是跨域</h2><p>由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：</p>\n<ul>\n<li>网络协议不同，如http协议访问https协议。</li>\n<li>端口不同，如80端口访问8080端口。</li>\n<li>域名不同，如qianduanblog.com访问baidu.com。</li>\n<li>子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。</li>\n<li>域名和域名对应ip,如<a href=\"http://www.a.com访问20.205.28.90\" target=\"_blank\" rel=\"noopener\">www.a.com访问20.205.28.90</a>.</li>\n</ul>\n<h2 id=\"跨域请求的安全问题\"><a href=\"#跨域请求的安全问题\" class=\"headerlink\" title=\"跨域请求的安全问题\"></a>跨域请求的安全问题</h2><ul>\n<li><p>CRSF攻击</p>\n<ul>\n<li>什么是CRSF攻击<img src=\"https://i.loli.net/2019/10/20/qWMjmuYSEQ9GfBL.png\" alt=\"1571509574_1_.jpg\"></li>\n<li>CSRF漏洞检测：检测CSRF漏洞是一项比较繁琐的工作，最简单的方法就是抓取一个正常请求的数据包，<br>去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。<img src=\"https://i.loli.net/2019/10/20/NCUyL6HvoDalPEV.png\" alt=\"1571509614_1_.jpg\"></li>\n<li>目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。<ul>\n<li>（1）验证 HTTP Referer 字段 —-IE老的浏览器危险<img src=\"https://i.loli.net/2019/10/20/BtbPwnQGYCxeohu.png\" alt=\"1571509632_1_.jpg\"></li>\n<li>（2）在请求地址中添加 token 并验证<img src=\"https://i.loli.net/2019/10/20/5rznbLxMdjhBoWV.png\" alt=\"1571509639_1_.jpg\"></li>\n<li>（3）在 HTTP 头中自定义属性并验证<img src=\"https://i.loli.net/2019/10/20/yROB9aW2xKNVwD5.png\" alt=\"1571509648_1_.jpg\"></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"同源策略\"><a href=\"#同源策略\" class=\"headerlink\" title=\"同源策略\"></a>同源策略</h2><ul>\n<li>一个源的定义<img src=\"https://i.loli.net/2019/10/20/IYrfgTRkWOCcVoZ.png\" alt=\"1571509817_1_.jpg\"></li>\n<li>什么是同源策略<ul>\n<li>同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。</li>\n<li>同源策略限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"不受同源策略限制的请求方式\"><a href=\"#不受同源策略限制的请求方式\" class=\"headerlink\" title=\"不受同源策略限制的请求方式\"></a>不受同源策略限制的请求方式</h2><ul>\n<li><p><img src=\"https://i.loli.net/2019/10/20/fBALds24kGEDpYM.png\" alt=\"1571509953_1_.jpg\"></p>\n</li>\n<li><p>1.是不拿资源的单纯的页面跳转</p>\n</li>\n<li><p>2.就是jsonp的简单实现模式，利用sript引用，或者说是JSONP的原型：创建一个回调函数，<br>然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。<br><a href=\"https://www.cnblogs.com/rain-chenwei/p/9520240.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/rain-chenwei/p/9520240.html</a></p>\n</li>\n</ul>\n<h2 id=\"jsonp怎么实现的跨域\"><a href=\"#jsonp怎么实现的跨域\" class=\"headerlink\" title=\"jsonp怎么实现的跨域\"></a>jsonp怎么实现的跨域</h2><ul>\n<li>通过script标签的跨域特性来绕过同源策略拿到想要的数据<br>就是jsonp的简单实现模式，或者说是JSONP的原型：创建一个回调函数，<br>然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。<br><a href=\"https://www.cnblogs.com/rain-chenwei/p/9520240.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/rain-chenwei/p/9520240.html</a></li>\n</ul>\n<h2 id=\"真正完全解决跨域问题-能用上post请求，还得靠后端设置允许\"><a href=\"#真正完全解决跨域问题-能用上post请求，还得靠后端设置允许\" class=\"headerlink\" title=\"真正完全解决跨域问题 能用上post请求，还得靠后端设置允许\"></a>真正完全解决跨域问题 能用上post请求，还得靠后端设置允许</h2><ul>\n<li>上面的方式只能get请求/安全系数不够高</li>\n<li>后端设置这样后 即可<img src=\"https://i.loli.net/2019/10/20/avFLdskC1ZQEwAi.png\" alt=\"1571510720_1_.jpg\"></li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"什么是跨域\"><a href=\"#什么是跨域\" class=\"headerlink\" title=\"什么是跨域\"></a>什么是跨域</h2><p>由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：</p>\n<ul>\n<li>网络协议不同，如http协议访问https协议。</li>\n<li>端口不同，如80端口访问8080端口。</li>\n<li>域名不同，如qianduanblog.com访问baidu.com。</li>\n<li>子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。</li>\n<li>域名和域名对应ip,如<a href=\"http://www.a.com访问20.205.28.90\" target=\"_blank\" rel=\"noopener\">www.a.com访问20.205.28.90</a>.</li>\n</ul>\n<h2 id=\"跨域请求的安全问题\"><a href=\"#跨域请求的安全问题\" class=\"headerlink\" title=\"跨域请求的安全问题\"></a>跨域请求的安全问题</h2><ul>\n<li><p>CRSF攻击</p>\n<ul>\n<li>什么是CRSF攻击<img src=\"https://i.loli.net/2019/10/20/qWMjmuYSEQ9GfBL.png\" alt=\"1571509574_1_.jpg\"></li>\n<li>CSRF漏洞检测：检测CSRF漏洞是一项比较繁琐的工作，最简单的方法就是抓取一个正常请求的数据包，<br>去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。<img src=\"https://i.loli.net/2019/10/20/NCUyL6HvoDalPEV.png\" alt=\"1571509614_1_.jpg\"></li>\n<li>目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。<ul>\n<li>（1）验证 HTTP Referer 字段 —-IE老的浏览器危险<img src=\"https://i.loli.net/2019/10/20/BtbPwnQGYCxeohu.png\" alt=\"1571509632_1_.jpg\"></li>\n<li>（2）在请求地址中添加 token 并验证<img src=\"https://i.loli.net/2019/10/20/5rznbLxMdjhBoWV.png\" alt=\"1571509639_1_.jpg\"></li>\n<li>（3）在 HTTP 头中自定义属性并验证<img src=\"https://i.loli.net/2019/10/20/yROB9aW2xKNVwD5.png\" alt=\"1571509648_1_.jpg\"></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"同源策略\"><a href=\"#同源策略\" class=\"headerlink\" title=\"同源策略\"></a>同源策略</h2><ul>\n<li>一个源的定义<img src=\"https://i.loli.net/2019/10/20/IYrfgTRkWOCcVoZ.png\" alt=\"1571509817_1_.jpg\"></li>\n<li>什么是同源策略<ul>\n<li>同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。</li>\n<li>同源策略限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"不受同源策略限制的请求方式\"><a href=\"#不受同源策略限制的请求方式\" class=\"headerlink\" title=\"不受同源策略限制的请求方式\"></a>不受同源策略限制的请求方式</h2><ul>\n<li><p><img src=\"https://i.loli.net/2019/10/20/fBALds24kGEDpYM.png\" alt=\"1571509953_1_.jpg\"></p>\n</li>\n<li><p>1.是不拿资源的单纯的页面跳转</p>\n</li>\n<li><p>2.就是jsonp的简单实现模式，利用sript引用，或者说是JSONP的原型：创建一个回调函数，<br>然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。<br><a href=\"https://www.cnblogs.com/rain-chenwei/p/9520240.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/rain-chenwei/p/9520240.html</a></p>\n</li>\n</ul>\n<h2 id=\"jsonp怎么实现的跨域\"><a href=\"#jsonp怎么实现的跨域\" class=\"headerlink\" title=\"jsonp怎么实现的跨域\"></a>jsonp怎么实现的跨域</h2><ul>\n<li>通过script标签的跨域特性来绕过同源策略拿到想要的数据<br>就是jsonp的简单实现模式，或者说是JSONP的原型：创建一个回调函数，<br>然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。<br><a href=\"https://www.cnblogs.com/rain-chenwei/p/9520240.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/rain-chenwei/p/9520240.html</a></li>\n</ul>\n<h2 id=\"真正完全解决跨域问题-能用上post请求，还得靠后端设置允许\"><a href=\"#真正完全解决跨域问题-能用上post请求，还得靠后端设置允许\" class=\"headerlink\" title=\"真正完全解决跨域问题 能用上post请求，还得靠后端设置允许\"></a>真正完全解决跨域问题 能用上post请求，还得靠后端设置允许</h2><ul>\n<li>上面的方式只能get请求/安全系数不够高</li>\n<li>后端设置这样后 即可<img src=\"https://i.loli.net/2019/10/20/avFLdskC1ZQEwAi.png\" alt=\"1571510720_1_.jpg\"></li>\n</ul>\n"},{"title":"Token身份验证","date":"2019-10-03T15:27:02.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\nToken、session、coockie的区别\n\nhttps://www.cnblogs.com/moyand/p/9047978.html\n\nhttps://blog.csdn.net/weixin_43358075/article/details/89387856\n\n\n\n基于Token的身份验证的过程如下:\n\n- 每一次请求都需要token。token应该在HTTP的头部发送从而保证了Http请求无状态。\n 我们同样通过设置服务器属性Access-Control-Allow-Origin:* ，\n 让服务器能接受到来自所有域的请求。需要主要的是，在ACAO头部标明(designating)*时，\n 不得带有像HTTP认证，客户端SSL证书和cookies的证书。\n- 1.用户登录校验，校验成功后就返回Token给客户端。\n- 2.客户端收到数据后保存在客户端\n- 3.客户端每次访问API是携带Token到服务器端。\n- 4.服务器端采用filter过滤器校验。校验成功则返回请求数据，校验失败则返回错误码\n\n我个人是吧token存在 localstorage的，但日常使用是用vuex拿出localstorage里的数据来使用的，\n\ntoken里可以放任何想向后端发送的信息 例如 账号密码，邀请码，各种验证码等。\n\n","source":"_posts/Token身份验证.md","raw":"---\ntitle: Token身份验证\ndate: 2019-10-03 23:27:02\ntags:\n - JavaScript\n - Token\n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\nToken、session、coockie的区别\n\nhttps://www.cnblogs.com/moyand/p/9047978.html\n\nhttps://blog.csdn.net/weixin_43358075/article/details/89387856\n\n\n\n基于Token的身份验证的过程如下:\n\n- 每一次请求都需要token。token应该在HTTP的头部发送从而保证了Http请求无状态。\n 我们同样通过设置服务器属性Access-Control-Allow-Origin:* ，\n 让服务器能接受到来自所有域的请求。需要主要的是，在ACAO头部标明(designating)*时，\n 不得带有像HTTP认证，客户端SSL证书和cookies的证书。\n- 1.用户登录校验，校验成功后就返回Token给客户端。\n- 2.客户端收到数据后保存在客户端\n- 3.客户端每次访问API是携带Token到服务器端。\n- 4.服务器端采用filter过滤器校验。校验成功则返回请求数据，校验失败则返回错误码\n\n我个人是吧token存在 localstorage的，但日常使用是用vuex拿出localstorage里的数据来使用的，\n\ntoken里可以放任何想向后端发送的信息 例如 账号密码，邀请码，各种验证码等。\n\n","slug":"Token身份验证","published":1,"_id":"ck1xx3v640021c0tjnxdac1sa","layout":"post","photos":[],"link":"","content":"<p>Token、session、coockie的区别</p>\n<p><a href=\"https://www.cnblogs.com/moyand/p/9047978.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/moyand/p/9047978.html</a></p>\n<p><a href=\"https://blog.csdn.net/weixin_43358075/article/details/89387856\" target=\"_blank\" rel=\"noopener\">https://blog.csdn.net/weixin_43358075/article/details/89387856</a></p>\n<p>基于Token的身份验证的过程如下:</p>\n<ul>\n<li>每一次请求都需要token。token应该在HTTP的头部发送从而保证了Http请求无状态。<br>我们同样通过设置服务器属性Access-Control-Allow-Origin:* ，<br>让服务器能接受到来自所有域的请求。需要主要的是，在ACAO头部标明(designating)*时，<br>不得带有像HTTP认证，客户端SSL证书和cookies的证书。</li>\n<li>1.用户登录校验，校验成功后就返回Token给客户端。</li>\n<li>2.客户端收到数据后保存在客户端</li>\n<li>3.客户端每次访问API是携带Token到服务器端。</li>\n<li>4.服务器端采用filter过滤器校验。校验成功则返回请求数据，校验失败则返回错误码</li>\n</ul>\n<p>我个人是吧token存在 localstorage的，但日常使用是用vuex拿出localstorage里的数据来使用的，</p>\n<p>token里可以放任何想向后端发送的信息 例如 账号密码，邀请码，各种验证码等。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>Token、session、coockie的区别</p>\n<p><a href=\"https://www.cnblogs.com/moyand/p/9047978.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/moyand/p/9047978.html</a></p>\n<p><a href=\"https://blog.csdn.net/weixin_43358075/article/details/89387856\" target=\"_blank\" rel=\"noopener\">https://blog.csdn.net/weixin_43358075/article/details/89387856</a></p>\n<p>基于Token的身份验证的过程如下:</p>\n<ul>\n<li>每一次请求都需要token。token应该在HTTP的头部发送从而保证了Http请求无状态。<br>我们同样通过设置服务器属性Access-Control-Allow-Origin:* ，<br>让服务器能接受到来自所有域的请求。需要主要的是，在ACAO头部标明(designating)*时，<br>不得带有像HTTP认证，客户端SSL证书和cookies的证书。</li>\n<li>1.用户登录校验，校验成功后就返回Token给客户端。</li>\n<li>2.客户端收到数据后保存在客户端</li>\n<li>3.客户端每次访问API是携带Token到服务器端。</li>\n<li>4.服务器端采用filter过滤器校验。校验成功则返回请求数据，校验失败则返回错误码</li>\n</ul>\n<p>我个人是吧token存在 localstorage的，但日常使用是用vuex拿出localstorage里的数据来使用的，</p>\n<p>token里可以放任何想向后端发送的信息 例如 账号密码，邀请码，各种验证码等。</p>\n"},{"title":"内存溢出内存泄露","date":"2019-06-09T14:00:52.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n[TOC]\n\n\n\n## 内存溢出：（Out Of Memory---OOM）\n\n定义：系统已经不能再分配出你所需要的空间，比如你需要100M的空间，系统只剩90M了，这就叫内存溢出\n\n## 内存泄漏： (Memory Leak)\n\n定义：强引用所指向的对象不会被回收，可能导致内存泄漏，虚拟机宁愿抛出OOM也不会去回收他指向的对象，意思就是你用资源的时候为他开辟了一段空间，当你用完时忘记释放资源了，这时内存还被占用着，一次没关系，但是内存泄漏次数多了就会导致内存溢出\n\n\n\n## 小结：内存溢出就是内存不够用了，而 内存泄漏会导致内存溢出。\n\n\n\n## 常见内存泄漏的原因 ：\n\n- 1：意外的全局变量\n \n- 2、闭包引起的内存泄漏\n- 3、dom清空或删除时，事件未清除导致的内存泄漏\n- 4、被遗忘的计时器或回调函数\n\n## 浏览器 F12里的 perfomance功能（曾经的timeline）可以查网页内存情况\n\n\n\n","source":"_posts/内存溢出内存泄露.md","raw":"---\ntitle: 内存溢出内存泄露\ndate: 2019-06-09 22:00:52\ntags:\n - 开发常识\n \ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n\n---\n\n[TOC]\n\n\n\n## 内存溢出：（Out Of Memory---OOM）\n\n定义：系统已经不能再分配出你所需要的空间，比如你需要100M的空间，系统只剩90M了，这就叫内存溢出\n\n## 内存泄漏： (Memory Leak)\n\n定义：强引用所指向的对象不会被回收，可能导致内存泄漏，虚拟机宁愿抛出OOM也不会去回收他指向的对象，意思就是你用资源的时候为他开辟了一段空间，当你用完时忘记释放资源了，这时内存还被占用着，一次没关系，但是内存泄漏次数多了就会导致内存溢出\n\n\n\n## 小结：内存溢出就是内存不够用了，而 内存泄漏会导致内存溢出。\n\n\n\n## 常见内存泄漏的原因 ：\n\n- 1：意外的全局变量\n \n- 2、闭包引起的内存泄漏\n- 3、dom清空或删除时，事件未清除导致的内存泄漏\n- 4、被遗忘的计时器或回调函数\n\n## 浏览器 F12里的 perfomance功能（曾经的timeline）可以查网页内存情况\n\n\n\n","slug":"内存溢出内存泄露","published":1,"_id":"ck1xxcnlc002ac0tji8tpvuuw","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"内存溢出：（Out-Of-Memory—OOM）\"><a href=\"#内存溢出：（Out-Of-Memory—OOM）\" class=\"headerlink\" title=\"内存溢出：（Out Of Memory—OOM）\"></a>内存溢出：（Out Of Memory—OOM）</h2><p>定义：系统已经不能再分配出你所需要的空间，比如你需要100M的空间，系统只剩90M了，这就叫内存溢出</p>\n<h2 id=\"内存泄漏：-Memory-Leak\"><a href=\"#内存泄漏：-Memory-Leak\" class=\"headerlink\" title=\"内存泄漏： (Memory Leak)\"></a>内存泄漏： (Memory Leak)</h2><p>定义：强引用所指向的对象不会被回收，可能导致内存泄漏，虚拟机宁愿抛出OOM也不会去回收他指向的对象，意思就是你用资源的时候为他开辟了一段空间，当你用完时忘记释放资源了，这时内存还被占用着，一次没关系，但是内存泄漏次数多了就会导致内存溢出</p>\n<h2 id=\"小结：内存溢出就是内存不够用了，而-内存泄漏会导致内存溢出。\"><a href=\"#小结：内存溢出就是内存不够用了，而-内存泄漏会导致内存溢出。\" class=\"headerlink\" title=\"小结：内存溢出就是内存不够用了，而 内存泄漏会导致内存溢出。\"></a>小结：内存溢出就是内存不够用了，而 内存泄漏会导致内存溢出。</h2><h2 id=\"常见内存泄漏的原因-：\"><a href=\"#常见内存泄漏的原因-：\" class=\"headerlink\" title=\"常见内存泄漏的原因 ：\"></a>常见内存泄漏的原因 ：</h2><ul>\n<li>1：意外的全局变量<img src=\"https://i.loli.net/2019/10/20/SpvPedht95U2ERs.png\" alt=\"1571511752_1_.jpg\"><br><img src=\"https://i.loli.net/2019/10/20/rOaDVCLbBzE4Plw.png\" alt=\"1571511759_1_.jpg\"></li>\n<li>2、闭包引起的内存泄漏<img src=\"https://i.loli.net/2019/10/20/gcmSrhF1OsI4J5l.png\" alt=\"1571511765_1_.jpg\"></li>\n<li>3、dom清空或删除时，事件未清除导致的内存泄漏<img src=\"https://i.loli.net/2019/10/20/S75LWjDpTP8dit6.png\" alt=\"1571511772_1_.jpg\"></li>\n<li>4、被遗忘的计时器或回调函数</li>\n</ul>\n<h2 id=\"浏览器-F12里的-perfomance功能（曾经的timeline）可以查网页内存情况\"><a href=\"#浏览器-F12里的-perfomance功能（曾经的timeline）可以查网页内存情况\" class=\"headerlink\" title=\"浏览器 F12里的 perfomance功能（曾经的timeline）可以查网页内存情况\"></a>浏览器 F12里的 perfomance功能（曾经的timeline）可以查网页内存情况</h2><p><img src=\"https://i.loli.net/2019/10/20/ZGdBvxMnKLOqtwJ.png\" alt=\"1571512067_1_.jpg\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"内存溢出：（Out-Of-Memory—OOM）\"><a href=\"#内存溢出：（Out-Of-Memory—OOM）\" class=\"headerlink\" title=\"内存溢出：（Out Of Memory—OOM）\"></a>内存溢出：（Out Of Memory—OOM）</h2><p>定义：系统已经不能再分配出你所需要的空间，比如你需要100M的空间，系统只剩90M了，这就叫内存溢出</p>\n<h2 id=\"内存泄漏：-Memory-Leak\"><a href=\"#内存泄漏：-Memory-Leak\" class=\"headerlink\" title=\"内存泄漏： (Memory Leak)\"></a>内存泄漏： (Memory Leak)</h2><p>定义：强引用所指向的对象不会被回收，可能导致内存泄漏，虚拟机宁愿抛出OOM也不会去回收他指向的对象，意思就是你用资源的时候为他开辟了一段空间，当你用完时忘记释放资源了，这时内存还被占用着，一次没关系，但是内存泄漏次数多了就会导致内存溢出</p>\n<h2 id=\"小结：内存溢出就是内存不够用了，而-内存泄漏会导致内存溢出。\"><a href=\"#小结：内存溢出就是内存不够用了，而-内存泄漏会导致内存溢出。\" class=\"headerlink\" title=\"小结：内存溢出就是内存不够用了，而 内存泄漏会导致内存溢出。\"></a>小结：内存溢出就是内存不够用了，而 内存泄漏会导致内存溢出。</h2><h2 id=\"常见内存泄漏的原因-：\"><a href=\"#常见内存泄漏的原因-：\" class=\"headerlink\" title=\"常见内存泄漏的原因 ：\"></a>常见内存泄漏的原因 ：</h2><ul>\n<li>1：意外的全局变量<img src=\"https://i.loli.net/2019/10/20/SpvPedht95U2ERs.png\" alt=\"1571511752_1_.jpg\"><br><img src=\"https://i.loli.net/2019/10/20/rOaDVCLbBzE4Plw.png\" alt=\"1571511759_1_.jpg\"></li>\n<li>2、闭包引起的内存泄漏<img src=\"https://i.loli.net/2019/10/20/gcmSrhF1OsI4J5l.png\" alt=\"1571511765_1_.jpg\"></li>\n<li>3、dom清空或删除时，事件未清除导致的内存泄漏<img src=\"https://i.loli.net/2019/10/20/S75LWjDpTP8dit6.png\" alt=\"1571511772_1_.jpg\"></li>\n<li>4、被遗忘的计时器或回调函数</li>\n</ul>\n<h2 id=\"浏览器-F12里的-perfomance功能（曾经的timeline）可以查网页内存情况\"><a href=\"#浏览器-F12里的-perfomance功能（曾经的timeline）可以查网页内存情况\" class=\"headerlink\" title=\"浏览器 F12里的 perfomance功能（曾经的timeline）可以查网页内存情况\"></a>浏览器 F12里的 perfomance功能（曾经的timeline）可以查网页内存情况</h2><p><img src=\"https://i.loli.net/2019/10/20/ZGdBvxMnKLOqtwJ.png\" alt=\"1571512067_1_.jpg\"></p>\n"},{"title":"Less的使用","date":"2019-06-22T09:45:34.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n[TOC]\n\n## 定义：\n\nless是动态的样式表语言，通过简洁明了的语法定义，使编写CSS的工作变得非常简单，本质上LESS包含一套自定义的语法以及一个解析器。\n\n## 注释：\n\n\n\n## 变量：\n\n\n\n## 混入：\n\n- \n- 参数传递\n- 默认10像素，如果传了参数则按照参数\n\n## 嵌套：\n\n\n\n\n\n## H5直接引用 LESS文件：\n\n\n\n## less引入其他less：\n\n","source":"_posts/Less的使用.md","raw":"---\ntitle: Less的使用\ndate: 2019-06-22 17:45:34\ntags:\n - CSS\n - Less\n \ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n[TOC]\n\n## 定义：\n\nless是动态的样式表语言，通过简洁明了的语法定义，使编写CSS的工作变得非常简单，本质上LESS包含一套自定义的语法以及一个解析器。\n\n## 注释：\n\n\n\n## 变量：\n\n\n\n## 混入：\n\n- \n- 参数传递\n- 默认10像素，如果传了参数则按照参数\n\n## 嵌套：\n\n\n\n\n\n## H5直接引用 LESS文件：\n\n\n\n## less引入其他less：\n\n","slug":"Less的使用","published":1,"_id":"ck1xxw1ik002fc0tjrp181s35","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h2 id=\"定义：\"><a href=\"#定义：\" class=\"headerlink\" title=\"定义：\"></a>定义：</h2><p>less是动态的样式表语言，通过简洁明了的语法定义，使编写CSS的工作变得非常简单，本质上LESS包含一套自定义的语法以及一个解析器。</p>\n<h2 id=\"注释：\"><a href=\"#注释：\" class=\"headerlink\" title=\"注释：\"></a>注释：</h2><p><img src=\"https://i.loli.net/2019/10/20/1UrGBesotDpJb9X.png\" alt=\"1571512471_1_.jpg\"></p>\n<h2 id=\"变量：\"><a href=\"#变量：\" class=\"headerlink\" title=\"变量：\"></a>变量：</h2><p><img src=\"https://i.loli.net/2019/10/20/BiGYOU5T4WPqAeD.png\" alt=\"1571512480_1_.jpg\"></p>\n<h2 id=\"混入：\"><a href=\"#混入：\" class=\"headerlink\" title=\"混入：\"></a>混入：</h2><ul>\n<li><img src=\"https://i.loli.net/2019/10/20/wjTadL1FKEPe4yv.png\" alt=\"1571512487_1_.jpg\"></li>\n<li>参数传递<img src=\"https://i.loli.net/2019/10/20/vCc7mORNuGxdyoq.png\" alt=\"1571512496_1_.jpg\"></li>\n<li>默认10像素，如果传了参数则按照参数<img src=\"https://i.loli.net/2019/10/20/Kw7aiTy5kEQZ9r1.png\" alt=\"1571512504_1_.jpg\"></li>\n</ul>\n<h2 id=\"嵌套：\"><a href=\"#嵌套：\" class=\"headerlink\" title=\"嵌套：\"></a>嵌套：</h2><p><img src=\"https://i.loli.net/2019/10/20/oQtwlXdqRa2FkmK.png\" alt=\"1571512513_1_.jpg\"></p>\n<p><img src=\"https://i.loli.net/2019/10/20/Yov7Km9XfngeQcS.png\" alt=\"1571512523_1_.jpg\"></p>\n<h2 id=\"H5直接引用-LESS文件：\"><a href=\"#H5直接引用-LESS文件：\" class=\"headerlink\" title=\"H5直接引用 LESS文件：\"></a>H5直接引用 LESS文件：</h2><p><img src=\"https://i.loli.net/2019/10/20/GgmnBeSI4JwpPWb.png\" alt=\"1571512533_1_.jpg\"></p>\n<h2 id=\"less引入其他less：\"><a href=\"#less引入其他less：\" class=\"headerlink\" title=\"less引入其他less：\"></a>less引入其他less：</h2><p><img src=\"https://i.loli.net/2019/10/20/G5AbiRBdcEuIrq2.png\" alt=\"1571512540_1_.jpg\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h2 id=\"定义：\"><a href=\"#定义：\" class=\"headerlink\" title=\"定义：\"></a>定义：</h2><p>less是动态的样式表语言，通过简洁明了的语法定义，使编写CSS的工作变得非常简单，本质上LESS包含一套自定义的语法以及一个解析器。</p>\n<h2 id=\"注释：\"><a href=\"#注释：\" class=\"headerlink\" title=\"注释：\"></a>注释：</h2><p><img src=\"https://i.loli.net/2019/10/20/1UrGBesotDpJb9X.png\" alt=\"1571512471_1_.jpg\"></p>\n<h2 id=\"变量：\"><a href=\"#变量：\" class=\"headerlink\" title=\"变量：\"></a>变量：</h2><p><img src=\"https://i.loli.net/2019/10/20/BiGYOU5T4WPqAeD.png\" alt=\"1571512480_1_.jpg\"></p>\n<h2 id=\"混入：\"><a href=\"#混入：\" class=\"headerlink\" title=\"混入：\"></a>混入：</h2><ul>\n<li><img src=\"https://i.loli.net/2019/10/20/wjTadL1FKEPe4yv.png\" alt=\"1571512487_1_.jpg\"></li>\n<li>参数传递<img src=\"https://i.loli.net/2019/10/20/vCc7mORNuGxdyoq.png\" alt=\"1571512496_1_.jpg\"></li>\n<li>默认10像素，如果传了参数则按照参数<img src=\"https://i.loli.net/2019/10/20/Kw7aiTy5kEQZ9r1.png\" alt=\"1571512504_1_.jpg\"></li>\n</ul>\n<h2 id=\"嵌套：\"><a href=\"#嵌套：\" class=\"headerlink\" title=\"嵌套：\"></a>嵌套：</h2><p><img src=\"https://i.loli.net/2019/10/20/oQtwlXdqRa2FkmK.png\" alt=\"1571512513_1_.jpg\"></p>\n<p><img src=\"https://i.loli.net/2019/10/20/Yov7Km9XfngeQcS.png\" alt=\"1571512523_1_.jpg\"></p>\n<h2 id=\"H5直接引用-LESS文件：\"><a href=\"#H5直接引用-LESS文件：\" class=\"headerlink\" title=\"H5直接引用 LESS文件：\"></a>H5直接引用 LESS文件：</h2><p><img src=\"https://i.loli.net/2019/10/20/GgmnBeSI4JwpPWb.png\" alt=\"1571512533_1_.jpg\"></p>\n<h2 id=\"less引入其他less：\"><a href=\"#less引入其他less：\" class=\"headerlink\" title=\"less引入其他less：\"></a>less引入其他less：</h2><p><img src=\"https://i.loli.net/2019/10/20/G5AbiRBdcEuIrq2.png\" alt=\"1571512540_1_.jpg\"></p>\n"},{"title":"css文本间距和文本溢出的处理","date":"2019-06-12T01:35:32.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n[TOC]\n\n\n\n# 文本间距\n\n```\nline-height: 行间距\ntext-aglin； 水平对齐方式\ntext-indent: 首行缩进\nletter-spacing: 字间距\nword-spacing: 单词间距\n```\n\n# 文本溢出的处理\n\n1. word-break:自动换行 主要处理英文单词\n - break-all\t允许在单词内换行。\n - keep-all\t只能在半角空格或连字符处换行。\n2. white-space：自动换行 可以处理中文\n - pre\t空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。\n - nowrap\t文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。\n - pre-wrap\t保留空白符序列，但是正常地进行换行。\n - pre-line\t合并空白符序列，但是保留换行符。\n - inherit\t规定应该从父元素继承 white-space 属性的值。\n3. word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分\n - \n4. text-overflow 文字溢出\n - ellipsis : 当对象内文本溢出时显示省略标记（...）\n - clip : 不显示省略标记（...），而是简单的裁切\n\n\n\n","source":"_posts/css文本间距和文本溢出的处理 (copy).md","raw":"---\ntitle: css文本间距和文本溢出的处理\ndate: 2019-06-12 09:35:32\ntags:\n - css \n - 前端\ncomments: true\ncategories: 前端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n[TOC]\n\n\n\n# 文本间距\n\n```\nline-height: 行间距\ntext-aglin； 水平对齐方式\ntext-indent: 首行缩进\nletter-spacing: 字间距\nword-spacing: 单词间距\n```\n\n# 文本溢出的处理\n\n1. word-break:自动换行 主要处理英文单词\n - break-all\t允许在单词内换行。\n - keep-all\t只能在半角空格或连字符处换行。\n2. white-space：自动换行 可以处理中文\n - pre\t空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。\n - nowrap\t文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。\n - pre-wrap\t保留空白符序列，但是正常地进行换行。\n - pre-line\t合并空白符序列，但是保留换行符。\n - inherit\t规定应该从父元素继承 white-space 属性的值。\n3. word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分\n - \n4. text-overflow 文字溢出\n - ellipsis : 当对象内文本溢出时显示省略标记（...）\n - clip : 不显示省略标记（...），而是简单的裁切\n\n\n\n","slug":"css文本间距和文本溢出的处理 (copy)","published":1,"_id":"ck1xyvwkb0000sstj9ggz8qsk","layout":"post","photos":[],"link":"","content":"<p>[TOC]</p>\n<h1 id=\"文本间距\"><a href=\"#文本间距\" class=\"headerlink\" title=\"文本间距\"></a>文本间距</h1><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">line-height: 行间距</span><br><span class=\"line\">text-aglin； 水平对齐方式</span><br><span class=\"line\">text-indent: 首行缩进</span><br><span class=\"line\">letter-spacing: 字间距</span><br><span class=\"line\">word-spacing: 单词间距</span><br></pre></td></tr></table></figure>\n\n<h1 id=\"文本溢出的处理\"><a href=\"#文本溢出的处理\" class=\"headerlink\" title=\"文本溢出的处理\"></a>文本溢出的处理</h1><ol>\n<li>word-break:自动换行 主要处理英文单词<ul>\n<li>break-all 允许在单词内换行。</li>\n<li>keep-all 只能在半角空格或连字符处换行。</li>\n</ul>\n</li>\n<li>white-space：自动换行 可以处理中文<ul>\n<li>pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。</li>\n<li>nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。</li>\n<li>pre-wrap 保留空白符序列，但是正常地进行换行。</li>\n<li>pre-line 合并空白符序列，但是保留换行符。</li>\n<li>inherit 规定应该从父元素继承 white-space 属性的值。</li>\n</ul>\n</li>\n<li><h2 id=\"word-wrap-（CSS3）强制文本进行换行-即使这意味着会对单词进行拆分\"><a href=\"#word-wrap-（CSS3）强制文本进行换行-即使这意味着会对单词进行拆分\" class=\"headerlink\" title=\"word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分\"></a>word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分</h2></li>\n<li>text-overflow 文字溢出<ul>\n<li>ellipsis : 当对象内文本溢出时显示省略标记（…）</li>\n<li>clip : 不显示省略标记（…），而是简单的裁切</li>\n</ul>\n</li>\n</ol>\n","site":{"data":{}},"excerpt":"","more":"<p>[TOC]</p>\n<h1 id=\"文本间距\"><a href=\"#文本间距\" class=\"headerlink\" title=\"文本间距\"></a>文本间距</h1><figure class=\"highlight plain\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">line-height: 行间距</span><br><span class=\"line\">text-aglin； 水平对齐方式</span><br><span class=\"line\">text-indent: 首行缩进</span><br><span class=\"line\">letter-spacing: 字间距</span><br><span class=\"line\">word-spacing: 单词间距</span><br></pre></td></tr></table></figure>\n\n<h1 id=\"文本溢出的处理\"><a href=\"#文本溢出的处理\" class=\"headerlink\" title=\"文本溢出的处理\"></a>文本溢出的处理</h1><ol>\n<li>word-break:自动换行 主要处理英文单词<ul>\n<li>break-all 允许在单词内换行。</li>\n<li>keep-all 只能在半角空格或连字符处换行。</li>\n</ul>\n</li>\n<li>white-space：自动换行 可以处理中文<ul>\n<li>pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。</li>\n<li>nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。</li>\n<li>pre-wrap 保留空白符序列，但是正常地进行换行。</li>\n<li>pre-line 合并空白符序列，但是保留换行符。</li>\n<li>inherit 规定应该从父元素继承 white-space 属性的值。</li>\n</ul>\n</li>\n<li><h2 id=\"word-wrap-（CSS3）强制文本进行换行-即使这意味着会对单词进行拆分\"><a href=\"#word-wrap-（CSS3）强制文本进行换行-即使这意味着会对单词进行拆分\" class=\"headerlink\" title=\"word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分\"></a>word-wrap （CSS3）强制文本进行换行 - 即使这意味着会对单词进行拆分</h2></li>\n<li>text-overflow 文字溢出<ul>\n<li>ellipsis : 当对象内文本溢出时显示省略标记（…）</li>\n<li>clip : 不显示省略标记（…），而是简单的裁切</li>\n</ul>\n</li>\n</ol>\n"},{"title":"Express-generator 脚手架","date":"2019-10-01T16:56:43.000Z","top":7,"comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n## 快速创建一个Express应用框架。\n\n```javascript\n npm install express-generator -g\nexpress myapp --view=pug\ncd myapp\nnpm install\n\n\\# Run the myapp on Windows\nSET DEBUG=myapp:* & npm start\n\n\\# Run myapp on Linux/Mac OS X\nDEBUG=myapp:* npm start \n```\n\n## 使用nodemon 插件开启热启动 不用每次都重启express\n\n```javascript\nnpm install --save-dev nodemon\n```\n\n修改 package.json 的 scripts 内容：\n\"scripts\": { \"start\": \"node ./bin/www\", \"devstart\": \"nodemon ./bin/www\" }\n\n之后，使用 SET DEBUG=myapp:* & npm run devstart 启动 express 服务。\n这样在开发过程中修改文件的时候，express服务就会自动重启，非常方便。\n\n## 生成的文档目录结构\n\n\n把app.js文件引进/bin/www\n\n## 跨域配置：就是在 app.js 添加\n\n\n\n## bodypaser解析器 插件的用法\n\nhttps://www.jianshu.com/p/4ebcc5acff45\n\n","source":"_posts/Express-generator 脚手架.md","raw":"---\ntitle: Express-generator 脚手架\ndate: 2019-10-02 00:56:43\ntop: 7\ntags:\n - Nodejs\n - 前端\n - 后端\n - 脚手架 \ncomments: true\ncategories: 后端\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n## 快速创建一个Express应用框架。\n\n```javascript\n npm install express-generator -g\nexpress myapp --view=pug\ncd myapp\nnpm install\n\n\\# Run the myapp on Windows\nSET DEBUG=myapp:* & npm start\n\n\\# Run myapp on Linux/Mac OS X\nDEBUG=myapp:* npm start \n```\n\n## 使用nodemon 插件开启热启动 不用每次都重启express\n\n```javascript\nnpm install --save-dev nodemon\n```\n\n修改 package.json 的 scripts 内容：\n\"scripts\": { \"start\": \"node ./bin/www\", \"devstart\": \"nodemon ./bin/www\" }\n\n之后，使用 SET DEBUG=myapp:* & npm run devstart 启动 express 服务。\n这样在开发过程中修改文件的时候，express服务就会自动重启，非常方便。\n\n## 生成的文档目录结构\n\n\n把app.js文件引进/bin/www\n\n## 跨域配置：就是在 app.js 添加\n\n\n\n## bodypaser解析器 插件的用法\n\nhttps://www.jianshu.com/p/4ebcc5acff45\n\n","slug":"Express-generator 脚手架","published":1,"_id":"ck1xyw8fb0005sstjr1e847my","layout":"post","photos":[],"link":"","content":"<h2 id=\"快速创建一个Express应用框架。\"><a href=\"#快速创建一个Express应用框架。\" class=\"headerlink\" title=\"快速创建一个Express应用框架。\"></a>快速创建一个Express应用框架。</h2><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"> npm install express-generator -g</span><br><span class=\"line\">express myapp --view=pug</span><br><span class=\"line\">cd myapp</span><br><span class=\"line\">npm install</span><br><span class=\"line\"></span><br><span class=\"line\">\\# Run the myapp on Windows</span><br><span class=\"line\">SET DEBUG=myapp:* & npm start</span><br><span class=\"line\"></span><br><span class=\"line\">\\# Run myapp on Linux/Mac OS X</span><br><span class=\"line\">DEBUG=myapp:* npm start</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"使用nodemon-插件开启热启动-不用每次都重启express\"><a href=\"#使用nodemon-插件开启热启动-不用每次都重启express\" class=\"headerlink\" title=\"使用nodemon 插件开启热启动 不用每次都重启express\"></a>使用nodemon 插件开启热启动 不用每次都重启express</h2><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install --save-dev nodemon</span><br></pre></td></tr></table></figure>\n\n<p>修改 package.json 的 scripts 内容：<br>“scripts”: { “start”: “node ./bin/www”, “devstart”: “nodemon ./bin/www” }<img src=\"https://i.loli.net/2019/10/20/6DNJPZ7RQ24LrbY.png\" alt=\"1571514273_1_.jpg\"></p>\n<p>之后，使用 SET DEBUG=myapp:* & npm run devstart 启动 express 服务。<br>这样在开发过程中修改文件的时候，express服务就会自动重启，非常方便。</p>\n<h2 id=\"生成的文档目录结构\"><a href=\"#生成的文档目录结构\" class=\"headerlink\" title=\"生成的文档目录结构\"></a>生成的文档目录结构</h2><p><img src=\"https://i.loli.net/2019/10/20/1a2d73qhncjR6rt.png\" alt=\"1571514282_1_.jpg\"><br>把app.js文件引进/bin/www</p>\n<h2 id=\"跨域配置：就是在-app-js-添加\"><a href=\"#跨域配置：就是在-app-js-添加\" class=\"headerlink\" title=\"跨域配置：就是在 app.js 添加\"></a>跨域配置：就是在 app.js 添加</h2><p><img src=\"https://i.loli.net/2019/10/20/ivuLgECcNf7rhF5.png\" alt=\"1571514292_1_.jpg\"></p>\n<h2 id=\"bodypaser解析器-插件的用法\"><a href=\"#bodypaser解析器-插件的用法\" class=\"headerlink\" title=\"bodypaser解析器 插件的用法\"></a>bodypaser解析器 插件的用法</h2><p><a href=\"https://www.jianshu.com/p/4ebcc5acff45\" target=\"_blank\" rel=\"noopener\">https://www.jianshu.com/p/4ebcc5acff45</a></p>\n","site":{"data":{}},"excerpt":"","more":"<h2 id=\"快速创建一个Express应用框架。\"><a href=\"#快速创建一个Express应用框架。\" class=\"headerlink\" title=\"快速创建一个Express应用框架。\"></a>快速创建一个Express应用框架。</h2><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"> npm install express-generator -g</span><br><span class=\"line\">express myapp --view=pug</span><br><span class=\"line\">cd myapp</span><br><span class=\"line\">npm install</span><br><span class=\"line\"></span><br><span class=\"line\">\\# Run the myapp on Windows</span><br><span class=\"line\">SET DEBUG=myapp:* & npm start</span><br><span class=\"line\"></span><br><span class=\"line\">\\# Run myapp on Linux/Mac OS X</span><br><span class=\"line\">DEBUG=myapp:* npm start</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"使用nodemon-插件开启热启动-不用每次都重启express\"><a href=\"#使用nodemon-插件开启热启动-不用每次都重启express\" class=\"headerlink\" title=\"使用nodemon 插件开启热启动 不用每次都重启express\"></a>使用nodemon 插件开启热启动 不用每次都重启express</h2><figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install --save-dev nodemon</span><br></pre></td></tr></table></figure>\n\n<p>修改 package.json 的 scripts 内容：<br>“scripts”: { “start”: “node ./bin/www”, “devstart”: “nodemon ./bin/www” }<img src=\"https://i.loli.net/2019/10/20/6DNJPZ7RQ24LrbY.png\" alt=\"1571514273_1_.jpg\"></p>\n<p>之后，使用 SET DEBUG=myapp:* & npm run devstart 启动 express 服务。<br>这样在开发过程中修改文件的时候，express服务就会自动重启，非常方便。</p>\n<h2 id=\"生成的文档目录结构\"><a href=\"#生成的文档目录结构\" class=\"headerlink\" title=\"生成的文档目录结构\"></a>生成的文档目录结构</h2><p><img src=\"https://i.loli.net/2019/10/20/1a2d73qhncjR6rt.png\" alt=\"1571514282_1_.jpg\"><br>把app.js文件引进/bin/www</p>\n<h2 id=\"跨域配置：就是在-app-js-添加\"><a href=\"#跨域配置：就是在-app-js-添加\" class=\"headerlink\" title=\"跨域配置：就是在 app.js 添加\"></a>跨域配置：就是在 app.js 添加</h2><p><img src=\"https://i.loli.net/2019/10/20/ivuLgECcNf7rhF5.png\" alt=\"1571514292_1_.jpg\"></p>\n<h2 id=\"bodypaser解析器-插件的用法\"><a href=\"#bodypaser解析器-插件的用法\" class=\"headerlink\" title=\"bodypaser解析器 插件的用法\"></a>bodypaser解析器 插件的用法</h2><p><a href=\"https://www.jianshu.com/p/4ebcc5acff45\" target=\"_blank\" rel=\"noopener\">https://www.jianshu.com/p/4ebcc5acff45</a></p>\n"},{"title":"跨域以及跨域的方法","date":"2019-05-12T06:23:06.000Z","comments":1,"updated":"2019-10-07T14:27:55.000Z","_content":"\n\n\n本篇 非原创 只注明了其中一个作者出处，另一个找不到了。\n\n# VOD 流媒体系统\n\n## 视频上传\n\n- 格式\n - 支持的源音视频文件格式：3gpp, asf/wmv, avi, flv/f4v, mkv, mov/mp4/m4a, mp3, mp2, mpeg/mpg, ts/ogg, mts, wmv/wma, rm/rmvb, webm等。\n - 支持的视频编码标准：H.264, H.263/H.263+, MPEG-1/2/4, VP8/9, Quicktime, RealVideo, WMV, MJPEG等。\n - 支持的音频编码标准：MP1, MP2, MP3, AAC, AC-3, WMA, PCM, ADPCM, AMR, RealAudio, Vorbis, DSD等。\n- 上传方式：\n - 登录控制台直接上传:适用于少量视频文件，且视频较小（单视频小于5GB），每次最多300个视频文件。\n - 服务器端上传：使用VOD Java或PHP SDK，在服务器端上传。\n - 网页端上传：使用VOD JS SDK，可以通过网页直接上传。\n - APP手机端上传：使用BOS iOS、Android SDK可以在手机端上传。\n\n## 视频转码\n\n- 支持发布哪些视频格式？\n\n - 支持MP4、HLS、A-HLS、FLV。这里详细介绍常用的视频点播格式：\n\n - MP4\n 优点：常见的视频格式，适用范围广，在移动端和PC端的支持都很好，非常适合短视频（比如时长在5分钟以内）。在iOS和多数Andriod端，直接使用系统浏览器即可播放；在PC端，使用flash等控件进行播放。\n 缺点：由于MP4文件格式相对复杂，处理时间和成本高，对于长视频（比如时长在半小时以上），可能加载速度会慢。\n\n - HLS\n 优点：苹果公司的标准，推荐在移动端浏览器使用，加载速度快，多码率自适应能力强，适合对视频进行加密播放。\n 缺点：下载易用性较差，PC 端支持能力弱，对播放器要求高。\n\n - A-HLS\n 优点：A-HLS是多码率自适应的HLS格式，VOD 根据用户设置的最高分辨率、码率，自动转码生成最多高、中、 低3种码流（具体副本数和原始视频的码率有关）。当终端用户播放时，播放器会自动监测观看者当前网络情况，选择合适的码率，做好观看的流畅度和清晰度的权衡，让用户自动获取到最佳体验。\n 缺点：占用存储空间多。\n\n - FLV\n 优点：adobe公司的标准，适用于PC端浏览器，依赖flash。\n 缺点：大部分移动端浏览器均不支持。\n\n - \n\n - 来解释一下这张图，从左到右讲，左下方的inputs的视频源是什么格式都无所谓，他与server之间的通信协议也可以任意（比如RTMP），\n 总之只要把视频数据传输到服务器上即可。这个视频在server服务器上被转换成HLS格式的视频（既TS和m3u8文件）文件。\n 细拆分来看server里面的Media encoder的是一个转码模块负责将视频源中的视频数据转码到目标编码格式（H264）的视频数据，\n 视频源的编码格式可以是任何的视频编码格式（参考《视频技术基础》\n ）。转码成H264视频数据之后，在stream segmenter模块将视频切片，\n 切片的结果就是index file（m3u8）和ts文件了。图中的Distribution其实只是一个普通的HTTP文件服务器，然后客户端只需要访问一级index文件的路径就会自动播放HLS视频流了。\n\n \n\n\n 出处链接：https://www.jianshu.com/p/426425cad08a\n\n 关于自动转码\n\n - 1 视频上传成功后的转码操作是自动执行\n - 2 音视频直播LSS录制下来的视频不会转码，但会进行视频元信息、封面图提取等操作\n\n 默认转码模板\n\n - 默认转码模板是将源视频转码成自适应多码率的HLS格式的目标视频，\n 会自动生成高、中、低清晰度的多个码率目标视频，播放时根据网络情况自动切换。\n 用户可以自主更换转码模板组，可以自定义每个视频的转码模板参数，包括分辨率、码率、格式等。\n\n 如何得知转码结束并发布成功\n\n - 可以设置回调地址，每个视频发布成功时，会将消息通知到回调地址中。或者可以使用API查询媒资状态。\n\n## 视频播放\n\n- CDN服务\n - VOD产品 一般内部已经集成了CDN，播放地址都是CDN加速的\n- 可以实时对封面图进行缩放、裁剪，适应不同设备尺寸吗？\n - VOD集成了图片处理服务，可以直接在封面图URL后加处理参数，实现对图片的实时处理，包括等比例缩放、裁剪、加水印等。\n- 为什么有播放流量限制？如何取消限制？\n - 按照国家有关部门规定，提供网络视频相关业务需具备相关资质，因此VOD默认限制流量仅用于测试试用。\n 如果您需要正式上线业务，需要先完成企业认证，再提交相关资质申请商用，商用通过后即可取消流量限制。","source":"_posts/流媒体服务器的认识.md","raw":"---\ntitle: 跨域以及跨域的方法\ndate: 2019-05-12 14:23:06\n\ntags:\n - 服务器\n - 视频\ncomments: true\ncategories: 服务器\n\nupdated: 2019-10-07 22:27:55\n---\n\n\n\n本篇 非原创 只注明了其中一个作者出处，另一个找不到了。\n\n# VOD 流媒体系统\n\n## 视频上传\n\n- 格式\n - 支持的源音视频文件格式：3gpp, asf/wmv, avi, flv/f4v, mkv, mov/mp4/m4a, mp3, mp2, mpeg/mpg, ts/ogg, mts, wmv/wma, rm/rmvb, webm等。\n - 支持的视频编码标准：H.264, H.263/H.263+, MPEG-1/2/4, VP8/9, Quicktime, RealVideo, WMV, MJPEG等。\n - 支持的音频编码标准：MP1, MP2, MP3, AAC, AC-3, WMA, PCM, ADPCM, AMR, RealAudio, Vorbis, DSD等。\n- 上传方式：\n - 登录控制台直接上传:适用于少量视频文件，且视频较小（单视频小于5GB），每次最多300个视频文件。\n - 服务器端上传：使用VOD Java或PHP SDK，在服务器端上传。\n - 网页端上传：使用VOD JS SDK，可以通过网页直接上传。\n - APP手机端上传：使用BOS iOS、Android SDK可以在手机端上传。\n\n## 视频转码\n\n- 支持发布哪些视频格式？\n\n - 支持MP4、HLS、A-HLS、FLV。这里详细介绍常用的视频点播格式：\n\n - MP4\n 优点：常见的视频格式，适用范围广，在移动端和PC端的支持都很好，非常适合短视频（比如时长在5分钟以内）。在iOS和多数Andriod端，直接使用系统浏览器即可播放；在PC端，使用flash等控件进行播放。\n 缺点：由于MP4文件格式相对复杂，处理时间和成本高，对于长视频（比如时长在半小时以上），可能加载速度会慢。\n\n - HLS\n 优点：苹果公司的标准，推荐在移动端浏览器使用，加载速度快，多码率自适应能力强，适合对视频进行加密播放。\n 缺点：下载易用性较差，PC 端支持能力弱，对播放器要求高。\n\n - A-HLS\n 优点：A-HLS是多码率自适应的HLS格式，VOD 根据用户设置的最高分辨率、码率，自动转码生成最多高、中、 低3种码流（具体副本数和原始视频的码率有关）。当终端用户播放时，播放器会自动监测观看者当前网络情况，选择合适的码率，做好观看的流畅度和清晰度的权衡，让用户自动获取到最佳体验。\n 缺点：占用存储空间多。\n\n - FLV\n 优点：adobe公司的标准，适用于PC端浏览器，依赖flash。\n 缺点：大部分移动端浏览器均不支持。\n\n - \n\n - 来解释一下这张图，从左到右讲，左下方的inputs的视频源是什么格式都无所谓，他与server之间的通信协议也可以任意（比如RTMP），\n 总之只要把视频数据传输到服务器上即可。这个视频在server服务器上被转换成HLS格式的视频（既TS和m3u8文件）文件。\n 细拆分来看server里面的Media encoder的是一个转码模块负责将视频源中的视频数据转码到目标编码格式（H264）的视频数据，\n 视频源的编码格式可以是任何的视频编码格式（参考《视频技术基础》\n ）。转码成H264视频数据之后，在stream segmenter模块将视频切片，\n 切片的结果就是index file（m3u8）和ts文件了。图中的Distribution其实只是一个普通的HTTP文件服务器，然后客户端只需要访问一级index文件的路径就会自动播放HLS视频流了。\n\n \n\n\n 出处链接：https://www.jianshu.com/p/426425cad08a\n\n 关于自动转码\n\n - 1 视频上传成功后的转码操作是自动执行\n - 2 音视频直播LSS录制下来的视频不会转码，但会进行视频元信息、封面图提取等操作\n\n 默认转码模板\n\n - 默认转码模板是将源视频转码成自适应多码率的HLS格式的目标视频，\n 会自动生成高、中、低清晰度的多个码率目标视频，播放时根据网络情况自动切换。\n 用户可以自主更换转码模板组，可以自定义每个视频的转码模板参数，包括分辨率、码率、格式等。\n\n 如何得知转码结束并发布成功\n\n - 可以设置回调地址，每个视频发布成功时，会将消息通知到回调地址中。或者可以使用API查询媒资状态。\n\n## 视频播放\n\n- CDN服务\n - VOD产品 一般内部已经集成了CDN，播放地址都是CDN加速的\n- 可以实时对封面图进行缩放、裁剪，适应不同设备尺寸吗？\n - VOD集成了图片处理服务，可以直接在封面图URL后加处理参数，实现对图片的实时处理，包括等比例缩放、裁剪、加水印等。\n- 为什么有播放流量限制？如何取消限制？\n - 按照国家有关部门规定，提供网络视频相关业务需具备相关资质，因此VOD默认限制流量仅用于测试试用。\n 如果您需要正式上线业务，需要先完成企业认证，再提交相关资质申请商用，商用通过后即可取消流量限制。","slug":"流媒体服务器的认识","published":1,"_id":"ck1xz8el1000hsstjk53alncd","layout":"post","photos":[],"link":"","content":"<p>本篇 非原创 只注明了其中一个作者出处，另一个找不到了。</p>\n<h1 id=\"VOD-流媒体系统\"><a href=\"#VOD-流媒体系统\" class=\"headerlink\" title=\"VOD 流媒体系统\"></a>VOD 流媒体系统</h1><h2 id=\"视频上传\"><a href=\"#视频上传\" class=\"headerlink\" title=\"视频上传\"></a>视频上传</h2><ul>\n<li>格式<ul>\n<li>支持的源音视频文件格式：3gpp, asf/wmv, avi, flv/f4v, mkv, mov/mp4/m4a, mp3, mp2, mpeg/mpg, ts/ogg, mts, wmv/wma, rm/rmvb, webm等。</li>\n<li>支持的视频编码标准：H.264, H.263/H.263+, MPEG-1/2/4, VP8/9, Quicktime, RealVideo, WMV, MJPEG等。</li>\n<li>支持的音频编码标准：MP1, MP2, MP3, AAC, AC-3, WMA, PCM, ADPCM, AMR, RealAudio, Vorbis, DSD等。</li>\n</ul>\n</li>\n<li>上传方式：<ul>\n<li>登录控制台直接上传:适用于少量视频文件，且视频较小（单视频小于5GB），每次最多300个视频文件。</li>\n<li>服务器端上传：使用VOD Java或PHP SDK，在服务器端上传。</li>\n<li>网页端上传：使用VOD JS SDK，可以通过网页直接上传。</li>\n<li>APP手机端上传：使用BOS iOS、Android SDK可以在手机端上传。</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"视频转码\"><a href=\"#视频转码\" class=\"headerlink\" title=\"视频转码\"></a>视频转码</h2><ul>\n<li><p>支持发布哪些视频格式？</p>\n<ul>\n<li><p>支持MP4、HLS、A-HLS、FLV。这里详细介绍常用的视频点播格式：</p>\n</li>\n<li><p>MP4<br>优点：常见的视频格式，适用范围广，在移动端和PC端的支持都很好，非常适合短视频（比如时长在5分钟以内）。在iOS和多数Andriod端，直接使用系统浏览器即可播放；在PC端，使用flash等控件进行播放。<br>缺点：由于MP4文件格式相对复杂，处理时间和成本高，对于长视频（比如时长在半小时以上），可能加载速度会慢。</p>\n</li>\n<li><p>HLS<br>优点：苹果公司的标准，推荐在移动端浏览器使用，加载速度快，多码率自适应能力强，适合对视频进行加密播放。<br>缺点：下载易用性较差，PC 端支持能力弱，对播放器要求高。</p>\n</li>\n<li><p>A-HLS<br>优点：A-HLS是多码率自适应的HLS格式，VOD 根据用户设置的最高分辨率、码率，自动转码生成最多高、中、 低3种码流（具体副本数和原始视频的码率有关）。当终端用户播放时，播放器会自动监测观看者当前网络情况，选择合适的码率，做好观看的流畅度和清晰度的权衡，让用户自动获取到最佳体验。<br>缺点：占用存储空间多。</p>\n</li>\n<li><p>FLV<br>优点：adobe公司的标准，适用于PC端浏览器，依赖flash。<br>缺点：大部分移动端浏览器均不支持。</p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/20/brD9617s3OFukyg.png\" alt=\"1571514794_1_.jpg\"></p>\n</li>\n<li><p>来解释一下这张图，从左到右讲，左下方的inputs的视频源是什么格式都无所谓，他与server之间的通信协议也可以任意（比如RTMP），<br>总之只要把视频数据传输到服务器上即可。这个视频在server服务器上被转换成HLS格式的视频（既TS和m3u8文件）文件。<br>细拆分来看server里面的Media encoder的是一个转码模块负责将视频源中的视频数据转码到目标编码格式（H264）的视频数据，<br>视频源的编码格式可以是任何的视频编码格式（参考《视频技术基础》<br>）。转码成H264视频数据之后，在stream segmenter模块将视频切片，<br>切片的结果就是index file（m3u8）和ts文件了。图中的Distribution其实只是一个普通的HTTP文件服务器，然后客户端只需要访问一级index文件的路径就会自动播放HLS视频流了。</p>\n</li>\n</ul>\n</li>\n</ul>\n<pre><code>出处链接：https://www.jianshu.com/p/426425cad08a</code></pre><p> 关于自动转码</p>\n<ul>\n<li><p>1 视频上传成功后的转码操作是自动执行</p>\n</li>\n<li><p>2 音视频直播LSS录制下来的视频不会转码，但会进行视频元信息、封面图提取等操作</p>\n<p>默认转码模板</p>\n</li>\n<li><p>默认转码模板是将源视频转码成自适应多码率的HLS格式的目标视频，<br>会自动生成高、中、低清晰度的多个码率目标视频，播放时根据网络情况自动切换。<br>用户可以自主更换转码模板组，可以自定义每个视频的转码模板参数，包括分辨率、码率、格式等。</p>\n<p>如何得知转码结束并发布成功</p>\n</li>\n<li><p>可以设置回调地址，每个视频发布成功时，会将消息通知到回调地址中。或者可以使用API查询媒资状态。</p>\n</li>\n</ul>\n<h2 id=\"视频播放\"><a href=\"#视频播放\" class=\"headerlink\" title=\"视频播放\"></a>视频播放</h2><ul>\n<li>CDN服务<ul>\n<li>VOD产品 一般内部已经集成了CDN，播放地址都是CDN加速的</li>\n</ul>\n</li>\n<li>可以实时对封面图进行缩放、裁剪，适应不同设备尺寸吗？<ul>\n<li>VOD集成了图片处理服务，可以直接在封面图URL后加处理参数，实现对图片的实时处理，包括等比例缩放、裁剪、加水印等。</li>\n</ul>\n</li>\n<li>为什么有播放流量限制？如何取消限制？<ul>\n<li>按照国家有关部门规定，提供网络视频相关业务需具备相关资质，因此VOD默认限制流量仅用于测试试用。<br>如果您需要正式上线业务，需要先完成企业认证，再提交相关资质申请商用，商用通过后即可取消流量限制。</li>\n</ul>\n</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>本篇 非原创 只注明了其中一个作者出处，另一个找不到了。</p>\n<h1 id=\"VOD-流媒体系统\"><a href=\"#VOD-流媒体系统\" class=\"headerlink\" title=\"VOD 流媒体系统\"></a>VOD 流媒体系统</h1><h2 id=\"视频上传\"><a href=\"#视频上传\" class=\"headerlink\" title=\"视频上传\"></a>视频上传</h2><ul>\n<li>格式<ul>\n<li>支持的源音视频文件格式：3gpp, asf/wmv, avi, flv/f4v, mkv, mov/mp4/m4a, mp3, mp2, mpeg/mpg, ts/ogg, mts, wmv/wma, rm/rmvb, webm等。</li>\n<li>支持的视频编码标准：H.264, H.263/H.263+, MPEG-1/2/4, VP8/9, Quicktime, RealVideo, WMV, MJPEG等。</li>\n<li>支持的音频编码标准：MP1, MP2, MP3, AAC, AC-3, WMA, PCM, ADPCM, AMR, RealAudio, Vorbis, DSD等。</li>\n</ul>\n</li>\n<li>上传方式：<ul>\n<li>登录控制台直接上传:适用于少量视频文件，且视频较小（单视频小于5GB），每次最多300个视频文件。</li>\n<li>服务器端上传：使用VOD Java或PHP SDK，在服务器端上传。</li>\n<li>网页端上传：使用VOD JS SDK，可以通过网页直接上传。</li>\n<li>APP手机端上传：使用BOS iOS、Android SDK可以在手机端上传。</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"视频转码\"><a href=\"#视频转码\" class=\"headerlink\" title=\"视频转码\"></a>视频转码</h2><ul>\n<li><p>支持发布哪些视频格式？</p>\n<ul>\n<li><p>支持MP4、HLS、A-HLS、FLV。这里详细介绍常用的视频点播格式：</p>\n</li>\n<li><p>MP4<br>优点：常见的视频格式，适用范围广，在移动端和PC端的支持都很好，非常适合短视频（比如时长在5分钟以内）。在iOS和多数Andriod端，直接使用系统浏览器即可播放；在PC端，使用flash等控件进行播放。<br>缺点：由于MP4文件格式相对复杂，处理时间和成本高，对于长视频（比如时长在半小时以上），可能加载速度会慢。</p>\n</li>\n<li><p>HLS<br>优点：苹果公司的标准，推荐在移动端浏览器使用，加载速度快，多码率自适应能力强，适合对视频进行加密播放。<br>缺点：下载易用性较差，PC 端支持能力弱，对播放器要求高。</p>\n</li>\n<li><p>A-HLS<br>优点：A-HLS是多码率自适应的HLS格式，VOD 根据用户设置的最高分辨率、码率，自动转码生成最多高、中、 低3种码流（具体副本数和原始视频的码率有关）。当终端用户播放时，播放器会自动监测观看者当前网络情况，选择合适的码率，做好观看的流畅度和清晰度的权衡，让用户自动获取到最佳体验。<br>缺点：占用存储空间多。</p>\n</li>\n<li><p>FLV<br>优点：adobe公司的标准，适用于PC端浏览器，依赖flash。<br>缺点：大部分移动端浏览器均不支持。</p>\n</li>\n<li><p><img src=\"https://i.loli.net/2019/10/20/brD9617s3OFukyg.png\" alt=\"1571514794_1_.jpg\"></p>\n</li>\n<li><p>来解释一下这张图，从左到右讲，左下方的inputs的视频源是什么格式都无所谓，他与server之间的通信协议也可以任意（比如RTMP），<br>总之只要把视频数据传输到服务器上即可。这个视频在server服务器上被转换成HLS格式的视频（既TS和m3u8文件）文件。<br>细拆分来看server里面的Media encoder的是一个转码模块负责将视频源中的视频数据转码到目标编码格式（H264）的视频数据，<br>视频源的编码格式可以是任何的视频编码格式（参考《视频技术基础》<br>）。转码成H264视频数据之后，在stream segmenter模块将视频切片，<br>切片的结果就是index file（m3u8）和ts文件了。图中的Distribution其实只是一个普通的HTTP文件服务器，然后客户端只需要访问一级index文件的路径就会自动播放HLS视频流了。</p>\n</li>\n</ul>\n</li>\n</ul>\n<pre><code>出处链接：https://www.jianshu.com/p/426425cad08a</code></pre><p> 关于自动转码</p>\n<ul>\n<li><p>1 视频上传成功后的转码操作是自动执行</p>\n</li>\n<li><p>2 音视频直播LSS录制下来的视频不会转码，但会进行视频元信息、封面图提取等操作</p>\n<p>默认转码模板</p>\n</li>\n<li><p>默认转码模板是将源视频转码成自适应多码率的HLS格式的目标视频，<br>会自动生成高、中、低清晰度的多个码率目标视频，播放时根据网络情况自动切换。<br>用户可以自主更换转码模板组，可以自定义每个视频的转码模板参数，包括分辨率、码率、格式等。</p>\n<p>如何得知转码结束并发布成功</p>\n</li>\n<li><p>可以设置回调地址，每个视频发布成功时，会将消息通知到回调地址中。或者可以使用API查询媒资状态。</p>\n</li>\n</ul>\n<h2 id=\"视频播放\"><a href=\"#视频播放\" class=\"headerlink\" title=\"视频播放\"></a>视频播放</h2><ul>\n<li>CDN服务<ul>\n<li>VOD产品 一般内部已经集成了CDN，播放地址都是CDN加速的</li>\n</ul>\n</li>\n<li>可以实时对封面图进行缩放、裁剪，适应不同设备尺寸吗？<ul>\n<li>VOD集成了图片处理服务，可以直接在封面图URL后加处理参数，实现对图片的实时处理，包括等比例缩放、裁剪、加水印等。</li>\n</ul>\n</li>\n<li>为什么有播放流量限制？如何取消限制？<ul>\n<li>按照国家有关部门规定，提供网络视频相关业务需具备相关资质，因此VOD默认限制流量仅用于测试试用。<br>如果您需要正式上线业务，需要先完成企业认证，再提交相关资质申请商用，商用通过后即可取消流量限制。</li>\n</ul>\n</li>\n</ul>\n"}],"PostAsset":[],"PostCategory":[{"post_id":"ck1opos680000fwtjov3z6jtb","category_id":"ck1opos6h0002fwtjn1n2o4ec","_id":"ck1opos6o0007fwtjclastwwb"},{"post_id":"ck1opos6e0001fwtjdzj9vytg","category_id":"ck1opos6l0004fwtjim2wk8dw","_id":"ck1opos6p0009fwtjmokfst59"},{"post_id":"ck1riqkbu0000kwtj6i2498pl","category_id":"ck1opos6l0004fwtjim2wk8dw","_id":"ck1riqv9m0003kwtj7l6qjd4b"},{"post_id":"ck1rmxoak0005kwtjr87vwa4f","category_id":"ck1opos6l0004fwtjim2wk8dw","_id":"ck1ro5rqq000bkwtjyetm3lq2"},{"post_id":"ck1rp4ddl000ekwtjx4ohpybx","category_id":"ck1rp5iiw000fkwtjijk2xkll","_id":"ck1rp5iiy000jkwtjk0nf9zfq"},{"post_id":"ck1s15w9d000lkwtj9koeue0o","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1s1v83t000ukwtjbpttbo0h"},{"post_id":"ck1up8thu00003otjjxpcdbqs","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1up8tie00043otjucmd3y94"},{"post_id":"ck1up8ti000013otjxvxwsq0l","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1up8tif00053otjavmdw9b9"},{"post_id":"ck1up8tib00033otj1srv32uv","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1up8tig00083otjf1rghdjx"},{"post_id":"ck1up8tkl000g3otjjo92zj2c","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1up8tkx000l3otjb8q9ewz2"},{"post_id":"ck1up8tko000h3otj8li4woeh","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1up8tky000n3otj9xqxtt9k"},{"post_id":"ck1up8tkt000j3otjs61l70fz","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1up8tl0000p3otj5zp5v7rh"},{"post_id":"ck1xb6q1i0001c0tj53oldivu","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xbaq770008c0tj5e209svg"},{"post_id":"ck1xbdke4000ac0tj01iqqycc","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xbe2dv000dc0tjvg7mm027"},{"post_id":"ck1xe79oq000oc0tjmqc8s7on","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xe79os000rc0tjr8p5nkuk"},{"post_id":"ck1xe7mbr000tc0tjr4g0sg54","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xnbig60012c0tjroqx123r"},{"post_id":"ck1xqwsk30016c0tjo4m4m4dk","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xqxk7q0018c0tjqrmnhlu3"},{"post_id":"ck1xt97fl001dc0tj5opsnaw6","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xt9tz7001fc0tj81ua23lq"},{"post_id":"ck1xv7d8u001jc0tj5hvqxebv","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xv87mg001lc0tjjm1fshzo"},{"post_id":"ck1xvxc7d001pc0tj7hxzbrlw","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xvy719001rc0tjic8h3ijm"},{"post_id":"ck1xw4mba001vc0tjkhgg8v4k","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xw5h5n001yc0tjc38ljq3l"},{"post_id":"ck1xx3v640021c0tjnxdac1sa","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xx4rgk0023c0tjxn7g3hhv"},{"post_id":"ck1xxcnlc002ac0tji8tpvuuw","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xxdxwz002cc0tjs881e3mi"},{"post_id":"ck1xxw1ik002fc0tjrp181s35","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xxwod3002hc0tjzvyzrkpw"},{"post_id":"ck1xyvwkb0000sstj9ggz8qsk","category_id":"ck1s1786c000mkwtj1ijmfgm5","_id":"ck1xyvwki0003sstjgp9resc3"},{"post_id":"ck1xyw8fb0005sstjr1e847my","category_id":"ck1xyyf43000esstjj94dt96i","_id":"ck1xyyf44000fsstj8bca3nkn"},{"post_id":"ck1xz8el1000hsstjk53alncd","category_id":"ck1xz95f3000isstjv26qsaqz","_id":"ck1xz95f5000lsstj0uycj2uh"}],"PostTag":[{"post_id":"ck1opos680000fwtjov3z6jtb","tag_id":"ck1opos6j0003fwtj5t69onbz","_id":"ck1opos6n0006fwtj32roj6lz"},{"post_id":"ck1opos6e0001fwtjdzj9vytg","tag_id":"ck1opos6m0005fwtj2di0vylt","_id":"ck1opos6q000afwtjv4m68fe0"},{"post_id":"ck1opos6e0001fwtjdzj9vytg","tag_id":"ck1opos6o0008fwtj250gv6lq","_id":"ck1opos6q000bfwtjgh7byfrw"},{"post_id":"ck1riqkbu0000kwtj6i2498pl","tag_id":"ck1opos6m0005fwtj2di0vylt","_id":"ck1riqv9m0001kwtjuxjwku9i"},{"post_id":"ck1riqkbu0000kwtj6i2498pl","tag_id":"ck1opos6o0008fwtj250gv6lq","_id":"ck1riqv9m0002kwtjxbzod2rt"},{"post_id":"ck1rmxoak0005kwtjr87vwa4f","tag_id":"ck1opos6m0005fwtj2di0vylt","_id":"ck1ro5rqo0009kwtjg6so4ukm"},{"post_id":"ck1rmxoak0005kwtjr87vwa4f","tag_id":"ck1opos6o0008fwtj250gv6lq","_id":"ck1ro5rqp000akwtjjnqyglrn"},{"post_id":"ck1rp4ddl000ekwtjx4ohpybx","tag_id":"ck1opos6m0005fwtj2di0vylt","_id":"ck1rp5iiy000hkwtjj7smsny7"},{"post_id":"ck1rp4ddl000ekwtjx4ohpybx","tag_id":"ck1rp5iix000gkwtjyhlilxbg","_id":"ck1rp5iiy000ikwtjkomqnc2g"},{"post_id":"ck1s15w9d000lkwtj9koeue0o","tag_id":"ck1s1786d000nkwtjisbxwm14","_id":"ck1s1v83r000skwtj2mcgicil"},{"post_id":"ck1s15w9d000lkwtj9koeue0o","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1s1v83s000tkwtj5mougspj"},{"post_id":"ck1up8thu00003otjjxpcdbqs","tag_id":"ck1up8ti300023otjyutxlwba","_id":"ck1up8tig00073otjuyrkon5x"},{"post_id":"ck1up8thu00003otjjxpcdbqs","tag_id":"ck1s1786d000nkwtjisbxwm14","_id":"ck1up8tih00093otjxyth7q65"},{"post_id":"ck1up8thu00003otjjxpcdbqs","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1up8tka000b3otjfs1rrcv2"},{"post_id":"ck1up8ti000013otjxvxwsq0l","tag_id":"ck1up8tif00063otjaobv4l2s","_id":"ck1up8tka000c3otjbmwowkl9"},{"post_id":"ck1up8ti000013otjxvxwsq0l","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1up8tkb000d3otjvdjnxhr7"},{"post_id":"ck1up8tib00033otj1srv32uv","tag_id":"ck1up8tif00063otjaobv4l2s","_id":"ck1up8tkb000e3otjk844wft4"},{"post_id":"ck1up8tib00033otj1srv32uv","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1up8tkc000f3otj4uax3g8e"},{"post_id":"ck1up8tkl000g3otjjo92zj2c","tag_id":"ck1up8ti300023otjyutxlwba","_id":"ck1up8tks000i3otj14fxrjqb"},{"post_id":"ck1up8tkl000g3otjjo92zj2c","tag_id":"ck1s1786d000nkwtjisbxwm14","_id":"ck1up8tku000k3otjgse895qm"},{"post_id":"ck1up8tkl000g3otjjo92zj2c","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1up8tky000m3otjzhqsrrr6"},{"post_id":"ck1up8tko000h3otj8li4woeh","tag_id":"ck1up8ti300023otjyutxlwba","_id":"ck1up8tkz000o3otjpkqkyyzh"},{"post_id":"ck1up8tko000h3otj8li4woeh","tag_id":"ck1s1786d000nkwtjisbxwm14","_id":"ck1up8tl0000q3otjb2j2hxku"},{"post_id":"ck1up8tko000h3otj8li4woeh","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1up8tl1000r3otj5njf5t9s"},{"post_id":"ck1up8tkt000j3otjs61l70fz","tag_id":"ck1up8ti300023otjyutxlwba","_id":"ck1up8tl1000s3otjc42qb6nl"},{"post_id":"ck1up8tkt000j3otjs61l70fz","tag_id":"ck1s1786d000nkwtjisbxwm14","_id":"ck1up8tl2000t3otjw2135chf"},{"post_id":"ck1up8tkt000j3otjs61l70fz","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1up8tl2000u3otjepkypswk"},{"post_id":"ck1s15w9d000lkwtj9koeue0o","tag_id":"ck1up8ti300023otjyutxlwba","_id":"ck1up8tl3000v3otj9le6pupk"},{"post_id":"ck1xb6q1i0001c0tj53oldivu","tag_id":"ck1xb7u150002c0tjv8arc4jb","_id":"ck1xbaq760006c0tjsyixvalc"},{"post_id":"ck1xb6q1i0001c0tj53oldivu","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xbaq760007c0tjmab83gxk"},{"post_id":"ck1xbdke4000ac0tj01iqqycc","tag_id":"ck1xb7u150002c0tjv8arc4jb","_id":"ck1xbe2du000bc0tjmwt6ssfr"},{"post_id":"ck1xbdke4000ac0tj01iqqycc","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xbe2dv000cc0tj9st2x1hl"},{"post_id":"ck1xbdke4000ac0tj01iqqycc","tag_id":"ck1xbedg1000ec0tj68mdclxg","_id":"ck1xbedg2000fc0tj6io1k4pd"},{"post_id":"ck1xe79oq000oc0tjmqc8s7on","tag_id":"ck1up8tif00063otjaobv4l2s","_id":"ck1xe79os000pc0tjzdjp7xbs"},{"post_id":"ck1xe79oq000oc0tjmqc8s7on","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xe79os000qc0tjnlgb4bpk"},{"post_id":"ck1xe7mbr000tc0tjr4g0sg54","tag_id":"ck1xe8gau000uc0tj04yzjjvx","_id":"ck1xnbig40010c0tjjqibjs5l"},{"post_id":"ck1xe7mbr000tc0tjr4g0sg54","tag_id":"ck1xe8gav000wc0tjg8whkhcn","_id":"ck1xnbig50011c0tjfo3t5jyi"},{"post_id":"ck1xe7mbr000tc0tjr4g0sg54","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xnbig60013c0tjr127cazi"},{"post_id":"ck1xqwsk30016c0tjo4m4m4dk","tag_id":"ck1xe8gau000uc0tj04yzjjvx","_id":"ck1xqxk7r0019c0tj97sh4e39"},{"post_id":"ck1xqwsk30016c0tjo4m4m4dk","tag_id":"ck1xqxk7q0017c0tj79eo2mox","_id":"ck1xqxk7r001ac0tj9fbsdpej"},{"post_id":"ck1xqwsk30016c0tjo4m4m4dk","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xqxk7s001bc0tj4i4dz40i"},{"post_id":"ck1xt97fl001dc0tj5opsnaw6","tag_id":"ck1xt9tz7001ec0tjlawfe0aw","_id":"ck1xt9tz9001gc0tjjulnw6oj"},{"post_id":"ck1xt97fl001dc0tj5opsnaw6","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xt9tz9001hc0tjwa9u52py"},{"post_id":"ck1xv7d8u001jc0tj5hvqxebv","tag_id":"ck1xv87mf001kc0tjgj47vpyc","_id":"ck1xv87mg001mc0tjursk6sdd"},{"post_id":"ck1xv7d8u001jc0tj5hvqxebv","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xv87mg001nc0tjinsym1is"},{"post_id":"ck1xvxc7d001pc0tj7hxzbrlw","tag_id":"ck1xvy718001qc0tjy6wqso61","_id":"ck1xvy719001sc0tjxb7ex5ti"},{"post_id":"ck1xvxc7d001pc0tj7hxzbrlw","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xvy71a001tc0tjt2jqo86x"},{"post_id":"ck1xw4mba001vc0tjkhgg8v4k","tag_id":"ck1xvy718001qc0tjy6wqso61","_id":"ck1xw5h5n001wc0tj2nw9lxjd"},{"post_id":"ck1xw4mba001vc0tjkhgg8v4k","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xw5h5n001xc0tjvqvemktm"},{"post_id":"ck1xx3v640021c0tjnxdac1sa","tag_id":"ck1xvy718001qc0tjy6wqso61","_id":"ck1xx4rgl0024c0tjntt5u7hj"},{"post_id":"ck1xx3v640021c0tjnxdac1sa","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xx4rgm0026c0tj8pec1xd8"},{"post_id":"ck1xx3v640021c0tjnxdac1sa","tag_id":"ck1xx4tng0027c0tj1r49j46c","_id":"ck1xx4tnh0028c0tje58sjh1g"},{"post_id":"ck1xxcnlc002ac0tji8tpvuuw","tag_id":"ck1xxdxwy002bc0tjdiu4ykhi","_id":"ck1xxdxwz002dc0tjjdbg23nh"},{"post_id":"ck1xxw1ik002fc0tjrp181s35","tag_id":"ck1xe8gau000uc0tj04yzjjvx","_id":"ck1xxwod3002ic0tjuh7x0nq0"},{"post_id":"ck1xxw1ik002fc0tjrp181s35","tag_id":"ck1xxwod2002gc0tjpsi5swc1","_id":"ck1xxwod3002jc0tji78xg38s"},{"post_id":"ck1xyvwkb0000sstj9ggz8qsk","tag_id":"ck1up8tif00063otjaobv4l2s","_id":"ck1xyvwkh0001sstj37h0scrz"},{"post_id":"ck1xyvwkb0000sstj9ggz8qsk","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xyvwkh0002sstjyopybx4u"},{"post_id":"ck1xyw8fb0005sstjr1e847my","tag_id":"ck1xyxbjc0006sstjxa7s3img","_id":"ck1xyxbje0009sstjczyvesw6"},{"post_id":"ck1xyw8fb0005sstjr1e847my","tag_id":"ck1s1786e000okwtjimlfhrbs","_id":"ck1xyxbje000asstjw9lijseo"},{"post_id":"ck1xyw8fb0005sstjr1e847my","tag_id":"ck1xyxbje0008sstjm820yb0a","_id":"ck1xyxbjf000bsstj815a1aiy"},{"post_id":"ck1xyw8fb0005sstjr1e847my","tag_id":"ck1xyybl0000csstjsmxkb64h","_id":"ck1xyybl0000dsstjpz5e9nlp"},{"post_id":"ck1xz8el1000hsstjk53alncd","tag_id":"ck1xz95f4000jsstjp4gupnbv","_id":"ck1xz95f6000msstja3oja0n0"},{"post_id":"ck1xz8el1000hsstjk53alncd","tag_id":"ck1xz95f5000ksstjs42zt5yd","_id":"ck1xz95f6000nsstj2uzcxqhn"}],"Tag":[{"name":"文本工具","_id":"ck1opos6j0003fwtj5t69onbz"},{"name":"工具","_id":"ck1opos6m0005fwtj2di0vylt"},{"name":"服務器","_id":"ck1opos6o0008fwtj250gv6lq"},{"name":"数据库","_id":"ck1rp5iix000gkwtjyhlilxbg"},{"name":"框架","_id":"ck1s1786d000nkwtjisbxwm14"},{"name":"前端","_id":"ck1s1786e000okwtjimlfhrbs"},{"name":"VUE","_id":"ck1up8ti300023otjyutxlwba"},{"name":"css","_id":"ck1up8tif00063otjaobv4l2s"},{"name":"JS","_id":"ck1xb7u150002c0tjv8arc4jb"},{"name":"ES6","_id":"ck1xbedg1000ec0tj68mdclxg"},{"name":"CSS","_id":"ck1xe8gau000uc0tj04yzjjvx"},{"name":"响应式","_id":"ck1xe8gav000wc0tjg8whkhcn"},{"name":"动画","_id":"ck1xqxk7q0017c0tj79eo2mox"},{"name":"AJAX","_id":"ck1xt9tz7001ec0tjlawfe0aw"},{"name":"HTML","_id":"ck1xv87mf001kc0tjgj47vpyc"},{"name":"JavaScript","_id":"ck1xvy718001qc0tjy6wqso61"},{"name":"token","_id":"ck1xx4rgj0022c0tjountay23"},{"name":"Token","_id":"ck1xx4tng0027c0tj1r49j46c"},{"name":"开发常识","_id":"ck1xxdxwy002bc0tjdiu4ykhi"},{"name":"Less","_id":"ck1xxwod2002gc0tjpsi5swc1"},{"name":"Nodejs","_id":"ck1xyxbjc0006sstjxa7s3img"},{"name":"后端","_id":"ck1xyxbje0008sstjm820yb0a"},{"name":"脚手架","_id":"ck1xyybl0000csstjsmxkb64h"},{"name":"服务器","_id":"ck1xz95f4000jsstjp4gupnbv"},{"name":"视频","_id":"ck1xz95f5000ksstjs42zt5yd"}]}}