皮皮网

1.玩转Puppeteer
2.vue-template-compiler？
3.nodejs前后端分离？
4.web前端需要学什么？
5.Mathjax加载慢，源码如何在Nuxt中加载本地JS文件
6.Nuxt.js踩坑记，源码利用Nuxt一键生成多页面静态站点

玩转Puppeteer

        1 简介

        Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。

        Puppeteer 默认以无头模式（headless）运行，也就是运行一个无界面的 Chrome 浏览器。

        2 应用场景

        2.1 页面生成 PDF

        Puppeteer 提供了页面生成 PDF 的方法，我们可以利用这个方法来将页面导出为 PDF ，导出的 PDF 效果和 Chrome 浏览器打印功能导出的 PDF 一致。

        具体的应用场景有：

        2.2 页面截图

        Puppeteer 提供了截图的方法，我们可以利用这个方法来将页面的指定区域导出为 jpeg 或 png 图片。

        具体的应用场景有：

        2.3 服务端渲染

        单页应用（SPA）的主要内容是在 JavaScript 向服务端请求数据后渲染的，存在爬虫难以抓取主要内容、首屏加载慢等问题，而使用 Next.js、Nuxt.js 等服务端渲染框架改造的成本较高。

        如果只是为了搜索引擎优化，我们可以考虑利用 Puppeteer 来实现。我们可以在网关层判断请求的来源，如果是爬虫，直接返回由 Puppeteer 服务端渲染的 html 文件。

        2.4 自动化UI测试

        使用 Puppeteer 可以模拟 Chrome 浏览器环境，结合 JavaScript 测试框架（如 Jest）可以实现自动化 UI 测试。

        Puppeteer 提供了 Mouse 类来模拟鼠标操作，提供了 Keyboard 类来模拟键盘操作，提供了 Touchscreen 类来模拟触屏操作，并且 Puppeteer 提供的 Page 类里有很多方法可以用来操作元素，比如点击元素、聚焦元素等操作。

        2.5 页面检测分析

        使用 Puppeteer 提供的 page.tracing 系列方法捕获网站的 timeline trace 来对页面进行性能分析。

        使用 Puppeteer 提供的 page.coverage 系列方法来获取 JavaScript 和 CSS 覆盖率。

        使用 Puppeteer 提供的 page.metrics() 方法来获取某个时间点页面的指标数据，包括页面的 documents 数量、iframe 数量、js 事件数量、dom 节点数量、布局数量、样式重新计算数量、布局时间、样式重新计算总时间、js 代码执行总时间、任务执行总时间、占用堆内存大小、总的堆内存大小。

        使用 Puppeteer 提供的 Request 类和 Response 类来监控页面发送的请求和接受的响应。

        3 基础概念

        Puppeteer API 是分层次的，反映了浏览器结构。

        Puppeteer 使用 DevTools 协议与浏览器进行通信。

        Browser 是浏览器实例，可以有多个浏览器上下文。

        BrowserContext 是浏览器上下文实例，定义了一个浏览会话并可拥有多个页面。

        Page 是页面实例，至少拥有一个框架（主框架mainFrame），可能还有由 iframe 创建的其他框架。

        Frame 是框架实例，至少有一个默认的 JavaScript 执行上下文。可能还有与扩展插件关联的执行上下文。

        Worker 表示一个WebWorker，具有单一执行上下文。

        4 快速上手

        4.1 安装 puppeteer-core

        npm i puppeteer-core

        puppeteer-core 是一个轻量级的 Puppeteer 版本，自 1.7.0 版本以来，官方都会发布一个 puppeteer-core 包，安装这个包时，默认不会下载 Chromium。

        4.2 下载 Chromium

        Puppeteer 官网： .vuejs.org/v2/guide/index.html ）。使用 Chrome 浏览器的打印功能，在打印预览中我们可以看到打印效果和实际网页的内容并不一致。这是因为 vue2 的官方文档网页添加了一些打印样式。访问打印样式所在的文件（ .vuejs.org/css/page.css ）并搜索 @media print 就能明白为什么在打印预览中一些元素（如顶栏、侧边栏等）被隐藏或者样式不同了。

        接下来进入正题，让我们使用 Puppeteer 来实现同样的打印（导出 PDF）功能。

        在 example 目录下新建 exportPdf.js 文件。

        pdf 方法会返回 PDF 文件的 Buffer 数据，以便后续处理。这里我们只是演示一下这个功能，传入 path 参数就能让 pdf 方法将 PDF 文件写到指定路径了。

        使用 node 运行这个 js 文件。

        node ./src/example/exportPdf.js

        运行完毕后，example 目录下出现了 exportPdf.pdf 文件。打开这个文件便能看到 vue2 官方文档了。

        5.2 网页截图

        在这一部分，我们演示一下整个网页截图的功能。

        在 example 目录下新建 exportImg.js 文件。

        使用 node 运行这个 js 文件。

        node ./src/example/exportImg.js

        运行完毕后，example 目录下出现了 exportImg.png 文件。打开这个文件便能看到 vue2 官方文档了。

vue-template-compiler？

       vue怎么解决

       ä½ å¥½ï¼Œ

       æŠ¥é”™åŽŸå› ï¼šé€šå¸¸å‡ºçŽ°äºŽä¸€äº›ä¾èµ–库的更新或者安装新的依赖库之后(可以认为npmupdate已经成为一种习惯)，导致了vue和vue-template-compiler的版本不一致。

       è§£å†³æ–¹æ¡ˆï¼šç»Ÿä¸€vue和vue-template-compiler的版本

       1"vue":"2.3.4",源码

       2"vue-template-compiler":"2.3.4",

       ï¼ˆæ³¨ï¼šå¦‚上所示版本号均为样例，具体实现请小伙伴们根据自己的版本号对应）

       ç„¶åŽæ‰§è¡Œï¼šnpmupdate就可以了。

       é™„加：

       è‹¥ä¸Šè¿°æ–¹æ³•æœªè§£å†³é—®é¢˜ï¼Œåˆ™å¯èƒ½æ˜¯å› ä¸ºå„依赖库之间产生了冲突，这里我们也有更暴力的解决方法。

       é¦–先查看项目根目录下是否生成过package-lock.json的文件，若有，删之。

       ç„¶åŽåˆ é™¤æ•´ä¸ªnode_modules目录，重新配置package.json(当然，要记得统一vue和vue-template-compiler的版本)

       é…ç½®å¥½ä¹‹åŽé‡æ–°æ‰§è¡Œï¼šnpminstall；

       OK，问题解决。

element饿了么的vue框架，运行报错

       å·²è§£å†³ï¼ŒVue2.1.5将_h重命名为_c，而Element目前发的版本都是用以前的compiler编译的，导致新版runtime无法运行Element。目前的解决方案是锁定Vue的版本为2.1.4

       é”å®švue相关版本

       #重新安装一下版本

       "vue-template-compiler":"2.1.4"

       "vue-loader":".0.0"

       "vue":"2.1.4"

       å…·ä½“命令如下：

       npmremove#卸载某个版本

       npmremovevue

       npmremovevue-template-compiler

       npmremovevue-loader

       npminstallvue@2.1.4#安装指定版本

       npminstallvue-template-compiler@2.1.4

       npminstallvue-loader@.0.0

-怎么让vue打包的时候禁用angular

       ç”±äºŽæ‰“包完成后，变量无法使用

       æˆ‘尝试这样写，以及vue-cli3的写法，都无法做到禁用严格模式

       image.png

       package.json

       "devDependencies":{

       "@vue/cli-plugin-babel":"~4.5.0",

       "@vue/cli-plugin-eslint":"~4.5.0",

       "@vue/cli-plugin-router":"~4.5.0",

       "@vue/cli-plugin-vuex":"~4.5.0",

       "@vue/cli-service":"~4.5.0",

       "babel-eslint":"^.1.0",

       "babel-plugin-transform-remove-console":"^6.9.4",

       "copy-webpack-plugin":"^4.0.1",

       "electron":"^9.0.0",

       "electron-devtools-installer":"^3.1.0",

       "eslint":"^6.7.2",

       "eslint-plugin-vue":"^6.2.2",

       "sass":"^1..5",

       "sass-loader":"^8.0.2",

       "svg-sprite-loader":"^6.0.",

       "vue-cli-plugin-electron-builder":"~2.0.0",

       "vue-template-compiler":"^2.6.",

       "webpack-bundle-analyzer":"^3.9.0"

       },

       "eslintConfig":{

       "globals":{

       "__static":true

       },

       "root":true,

       "env":{

       "node":true

       },

       "extends":[

       "plugin:vue/essential",

       "eslint:recommended",

       "plugin:vue/recommended"

       ],

       "parserOptions":{

       "parser":"babel-eslint"

       },

       "rules":{ }

       }

       å¯ä»¥ä½¿ç”¨replace-in-file全局替换掉"usestrict"字符串

       ä¸¥æ ¼æ¨¡å¼ä¸Žéžä¸¥æ ¼æ¨¡å¼

       æˆ‘在IE浏览器中,使用strict模式.发现,严格模式下,不允许一个属性多处定义的错误提示,这个怎么解决?

       JavaScript严格模式

       JavaScript的严格模式该怎么理解，今天看了es6，又讲到严格模式但我一直不理解，严格模式是干啥的(=_=)

       vue中如何禁用ES6严格模式。

       vue项目中引用外部的js文件之后，报错如下，请问怎么解决？

       nuxt打包将第三方包分离

       å¦‚题，在nuxt.config.js中配置了vendor后，打包后出现了app.chunkhash.js，common.chunkhash.js,manifest.chunkhash.js但是我想将项目用到的第三方库单独打包成一个文件，如使用了vue,axios,vuex,element-ui，我期望打包后是vue.js,axios.js,vuex.js,element-ui.js。尝试使用了CommonsChunkPlugin没有成功

       pyinstaller第三方包打包问题

       pyinstaller打包时报错:raiseJSONDecodeError("Expectingvalue",s,err.value)fromNonejson.decoder.JSONDecodeError:Expectingvalue:line1column1(char0)

       3k

       webpack如何打包第三方库的资源?

       æˆ‘在做一个普通的传统项目，由于使用了es并且一些页面中的小组件使用了react，打包项目为了省事儿就使用了webpack。后来发现jquery的一些插件中使用了静态资源(如jquery.jBox,ztree等等这些插件都有自己的图片和css)，这些资源该如何处理呢？

       javascript严格模式报错

       js严格模式使用费严格模式的代码报错'caller','callee',and'arguments'propertiesmaynotbeaccessedonstrictmodefunctionsortheargumentsobjectsforcallstothems

       3回答2.6k阅读?已解决

       Webpack如何打包第三方的ui框架？

       æœ€è¿‘在看webpack，了解了基本原理。实践中也在做点东西。想问下，如果npm库中没有的js库，里边有图片，有css，有自己的目录结构，该如何引用这类库到自己的项目中呢？

       2.8k

       è‡ªé¡¶å‘下学React源码

       ä»Žç†å¿µåˆ°æž¶æž„到实现到代码，透彻理解

       å‰ç«¯æ€§èƒ½ä¼˜åŒ–设计问

       å‰ç«¯æ€§èƒ½ä¼˜åŒ–,面试的必问题目

vue运行报错epf-fast@1.0.4dev

       ç‰ˆæœ¬ä¸ä¸€è‡´ã€‚vue版本和vue-template-compiler版本不一致就会出现运行报错epf-fast@1.0.4dev。解决方法：

       1、将node_modules文件夹先删除。

       2、将package.json文件的Vue版本号和vue-template-compiler版本号改为一致（2.6.7），选高的版本，重新进行npmrundev即可。

nodejs前后端分离？

       å‰åŽç«¯åˆ†ç¦»å’Œä¸åˆ†ç¦»å“ªä¸ªé€Ÿåº¦å¿«

       å‰åŽç«¯åˆ†ç¦»å¼€ã€‚

       å‰åŽç«¯åˆ†ç¦»åˆ™å¯ä»¥å¾ˆå¥½çš„解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器，直接在本地开发，然后通过一些插件来将api请求转发到后台，这样就可以完全模拟线上的场景，并且与后台解耦。前端可以独立完成与用户交互的整一个过程，两者都可以同时开工，不互相依赖，开发效率更快，而且分工比较均衡。

       åœ¨å‰åŽç«¯åˆ†ç¦»çš„应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。

如何在前后端项目突出网络优势 1.前后端分离的架构：

       1.前后端不分离：页面和数据都是同一个服务器返回的。

       2.前后端分离：1.后端服务器，处理请求，加载数据，返回响应

       2.前端服务器，返回页面，数据部分需要从后端加载，发送异步请求。

       2.前后端分离的优势：

       1.前端：负责页面的显示效果，用户的体验，浏览器的兼容性

后端：?负责服务器的稳定性并发性，提高服务器性能。

       2.并行开发，提高开发效率。

       3.可以利用客户端来处理一部分数据，降低服务器的压力。

       4.后端返回的错误信息，不直观地展示给用户。

       æœåŠ¡å™¨

       å‰ç«¯

       è¿ç»´

       åº“存车出售

       ç²¾é€‰æŽ¨è

       å¹¿å‘Š

       ä¼ ç»ŸMVC架构和前后端分离架构模式对比

       ä¸‹è½½Â·0评论

       å¹´2月日

       å‰åŽç«¯æž¶æž„设计

       é˜…读·0评论·0点赞

       å¹´5月日

       nginx搭建前后端分离架构

       é˜…读·0评论·4点赞

       å¹´8月日

       å‰åŽç«¯åˆ†ç¦»æž¶æž„概述

       é˜…读·0评论·0点赞

       å¹´6月8日

       ç®€å•äº†è§£å‰åŽç«¯åˆ†ç¦»æž¶æž„（MVVM）

       é˜…读·0评论·2点赞

       å¹´3月2日

       å‰åŽç«¯åŸºæœ¬æž¶æž„

       é˜…读·0评论·3点赞

       å¹´6月4日

       ä»Šæ—¥å¿…看：超火爆的韩国韩剧APP，赶快下载！

       ç²¾é€‰æŽ¨è

       å¹¿å‘Š

       å‰åŽç«¯åˆ†ç¦»æž¶æž„，超全面详解~

       é˜…读·1评论·点赞

       å¹´æœˆæ—¥

       ç”µå•†ç³»ç»Ÿæž¶æž„总论篇

       é˜…读·0评论·0点赞

       å¹´3月日

       å‰åŽç«¯åˆ†ç¦»æ¡†æž¶çš„实用及优点

       é˜…读·0评论·2点赞

       å¹´8月6日

       å‰åŽç«¯åˆ†ç¦»æž¶æž„的特点分别是什么？

       é˜…读·0评论·0点赞

       å¹´æœˆæ—¥

       å‰åŽç«¯åˆ†ç¦»æž¶æž„设计

       é˜…读·0评论·3点赞

       å¹´1月日

       å‰åŽç«¯åˆ†ç¦»å¼€å‘架构

       é˜…读·6评论·3点赞

       å¹´6月7日

       Node.js做Web后端优势为什么这么大？

       é˜…读·0评论·1点赞

       å¹´3月6日

       åŸºäºŽNodeJS的前后端分离

       é˜…读·0评论·3点赞

       å¹´5月日

       æ‰‹æŠŠæ‰‹æ­å»ºå‰åŽç«¯å¼€å‘框架

       é˜…读·评论·点赞

       å¹´8月日

       å‰åŽç«¯åˆ†ç¦»æŠ€æœ¯â€”—前端框架

       é˜…读·2评论·2点赞

       å¹´4月日

       å‰åŽç«¯åˆ†ç¦»æž¶æž„技术

       é˜…读·0评论·0点赞

       å¹´3月9日

       å‰åŽç«¯åˆ†ç¦»çš„优势是什么？

       é˜…读·0评论·2点赞

       å¹´æœˆ9日

       åŽç«¯æŠ€æœ¯ä½“系框架

       é˜…读·0评论·2点赞

       å¹´8月日

       åŽ»é¦–页

       çœ‹çœ‹æ›´å¤šçƒ­é—¨å†…容

       å¦‚何正确理解软件系统架构的前后端分离？

       é¦–先：软件系统架构的前后端分离更多是在近几年伴随互联网的盛行为提高前端与后端交互的响应速率，提升用户的体验进行衍生出了前后端分离架构。如：Vue、NodeJS与微服务架构结合。前端页面进行UI展示效果渲染，后端负责编写API服务进行数据提供，也可以引入NodeJS来作为桥梁架接后端API输出的JSON，返回前端进行页面展现。

       å…¶æ¬¡ï¼šåŸºäºŽå‰åŽç«¯åˆ†ç¦»æž¶æž„一方面提升响应速度，将数据计算的过程在中间层处理，前端进行展示；避免传统的大量数据请求服务器的压力基于中间层在内部处理拼接完成，性能得到了提升；以多组件、片段、卡片的模式实现并行的加载、显示，在非WiFI的3G、2G的弱网络环境下优势更为明显，模板并行加载，优先加载优先显示，提升用户的交互体验。

       æœ€åŽï¼šä»Žç»å…¸çš„MVC架构到SSM、SSH的Java框架时代，再到前端框架如：AngularJS、Vue等，虽然技术、架构一直在演变进步本质上均是为了更方便的解决需求，前后端分离架构更多的也是实现解耦的过程，不将前端与后端绑定，这也与SOA的理念是相吻合的，基于企业服务总线实现应用系统对接的松耦合，以插拔的模式将应用、单据、数据进行有效的连通与对接，以组件构建、平台搭建、架构支撑的模式共同铸建企业的信息化建设，以更专业的平台实现其专业领域的工作，助力企业信息化的发展。

nodejs-koa2（mvc模式）前后端分离前端设计

       å‰åŽç«¯åˆ†ç¦»ï¼Œå‰ç«¯nodejs运行环境，使用koa2集成负责资源分配与用户交互，实现token验证用户身份，路由控制。等！

       è‡ªè¡Œç™¾åº¦è§£å†³ï¼›

       "program":"${ workspaceFolder}\app.js"

       æ­¤å¤„就是是将app.js作为启动文件。${ workspaceFolder}代表根目录，vsc启动时会在根目录下找到并加载app.js文件。

       å‚数介绍：name项目名称、version版本号、description项目描述、main项目启动文件、scripts启动快捷设置，author作者，dependencies第3方中间件名称及版本。

       æœ€é‡è¦çš„

       â€œdependencies”这里添加一些要用到的包，以上是这次要用到的所有的包，版本自己更改。

       â€œscripts”这里是一些nodejs的便捷命令，上线的时候会用到，直接在终端中，package.json同级目录，执行‘npmstart’即可启动app.js。

       åˆ«çš„没啥太大作用瞎写即可。

       å¯åŠ¨ç›¸å…³é…ç½®ï¼Œå°è£…到config/init.js中，启动文件直接引用即可

       3-6-1、init.js项目核心。

       å¼‚常友好处理方法封装

       è·¯ç”±é…ç½®

       è§†å›¾æ¸²æŸ“

       æ ¸å¿ƒé›†æˆ

       3-6-2、config.js项目参数配置。为什么不用json文件因为json不能加注释

       3-6-3、token.js项目token相关方法封装。

       æ‰§è¡ŒåŽé¡¹ç›®ç»“构会增加两个文件

       æ–°å¢ž

       src/hello.js。

       views/index.html

       æµè§ˆå™¨è®¿é—®ï¼š

       è¾“入值获取token

       èŽ·å–çš„token如图：

       å…ˆä¸ç”¨å¸¦token进行访问:hello/jiaobaba,被token拦截，返回

       å¸¦ä¸Štoken访问：hello/jiaobaba

       æµ‹è¯•é¡µé¢æ¸²æŸ“，及跳转html页面，直接访问/views

       ç»“束！！！！！！

       éœ€è¦æºç è”系我

前后端分离方案以及技术选型

       ä½œè€…：关开发

       ä¸€.什么是前后端分离？

       ç†è§£å‰åŽç«¯åˆ†ç¦»å¤§æ¦‚可以从3个方面理解：

       1.交互形式

       2.代码组织形式

       3.开发模式与流程

       1.1交互形式

       å‰åŽç«¯ä¸åˆ†ç¦»

       åŽç«¯å°†æ•°æ®å’Œé¡µé¢ç»„装、渲染好了之后，向浏览器输出最终的html；浏览器接收到后会解析html，解析引入的css、执行js脚本，完成最终的页面展示。

       å‰åŽç«¯åˆ†ç¦»

       åŽç«¯åªéœ€è¦å’Œå‰ç«¯çº¦å®šå¥½æŽ¥æ”¶ä»¥åŠè¿”回的数据格式（一般用JSON格式），向前端提供API接口。前端就可以通过HTTP请求调用API的方式进行交互。前端获取到数据后，进行页面组装、渲染，最终在浏览器呈现。

       1.2代码组织形式

       å‰åŽç«¯ä¸åˆ†ç¦»

       åœ¨web应用早期的时候，前端页面以及后台业务数据处理的代码都放在一个工程下，甚至放在同一目录下，前端页面夹杂着后端代码。前、后端开发工程师都需要把整套代码导入开发工具才能开发。此阶段下前后端代码以及工作耦合度太高，前端不能独立开发和测试，后端人员也要依赖前端完成页面后才能完成开发。最糟糕的情况是前端工程师需要会后端模板技术（jsp），后端工程师还要会点前端技术，需要口头说明页面数据接口，才能配合完成开发。否则前端只能当一个“切图仔”，只输出HTML、CSS、以及很少量与业务逻辑无关的js；然后由后端转化为后端jsp，并且还要写业务的js代码。

       å‰åŽç«¯åˆ†ç¦»

       å‰åŽç«¯ä»£ç æ”¾åœ¨ä¸åŒçš„工程下，前端代码可以独立开发，通过mock/easy-mock技术模拟后端API服务可以独立运行、测试；后端代码也可以独立开发，运行、测试，通过swagger技术能自动生成API文档供前端阅读，还可以进行自动化接口测试，保证API的可用性，降低集成风险。

       1.3开发模式与流程

       å‰åŽç«¯ä¸åˆ†ç¦»

       åœ¨é¡¹ç›®å¼€å‘阶段，前端根据原型和UI设计稿，编写HTML、CSS以及少量与业务无关的js（纯效果那些），完成后交给后台人员，后台人员将HTML转为jsp，并通过JSP的模板语法进行数据绑定以及一些逻辑操作。后台完成后，将全部代码打包，包含前端代码、后端代码打成一个war，然后部署到同一台服务器运行。顶多做一下动静分离，也就是把图片、css、js分开部署到nginx。

       å…·ä½“开发流程如下：图略

       å‰åŽç«¯åˆ†ç¦»

       å®žçŽ°å‰åŽç«¯åˆ†ç¦»ä¹‹åŽï¼Œå‰ç«¯æ ¹æ®åŽŸåž‹å’ŒUI设计稿编写HTML、CSS以及少量与业务无关的js（纯效果那些），后端也同时根据原型进行API设计，并与前端协定API数据规范。等到后台API完成，或仅仅是API数据规范设定完成之后。前端即可通过HTTP调用API，或通过mock数据完成数据组装以及业务逻辑编写。前后端可以并行，或者前端先行于后端开发了。

       å…·ä½“开发流程如下：图略

       äºŒã€å‰åŽç«¯åˆ†ç¦»çš„好处与坏处。

       ä»Žä¸Šé¢3个方面对比了之后，前后端分离架构和传统的web架构相比，有很大的变化，看起来好处多多。到底是分还是不分，我们还是要理性分析是否值得才去做。

       ä»Žç›®å‰åº”用软件开发的发展趋势来看，主要有两方面需要注意：

       Â·è¶Šæ¥è¶Šæ³¨é‡ç”¨æˆ·ä½“验，随着互联网的发展，开始多终端化。

       Â·å¤§åž‹åº”用架构模式正在向云化、微服务化发展。

       æˆ‘们主要通过前后端分离架构，为我们带来以下四个方面的提升：

       Â·ä¸ºä¼˜è´¨äº§å“æ‰“造精益团队

       é€šè¿‡å°†å¼€å‘团队前后端分离化，让前后端工程师只需要专注于前端或后端的开发工作，是的前后端工程师实现自治，培养其独特的技术特性，然后构建出一个全栈式的精益开发团队。

       Â·æå‡å¼€å‘效率

       å‰åŽç«¯åˆ†ç¦»ä»¥åŽï¼Œå¯ä»¥å®žçŽ°å‰åŽç«¯ä»£ç çš„解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。与此同时，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。

       Â·å®Œç¾Žåº”对复杂多变的前端需求

       å¦‚果开发团队能完成前后端分离的转型，打造优秀的前后端团队，开发独立化，让开发人员做到专注专精，开发能力必然会有所提升，能够完美应对各种复杂多变的前端需求。

       Â·å¢žå¼ºä»£ç å¯ç»´æŠ¤æ€§

       å‰åŽç«¯åˆ†ç¦»åŽï¼Œåº”用的代码不再是前后端混合，只有在运行期才会有调用依赖关系。应用代码将会变得整洁清晰，不论是代码阅读还是代码维护都会比以前轻松。

       é‚£ä¹ˆå‰åŽç«¯åˆ†ç¦»æœ‰ä»€ä¹ˆä¸å¥½çš„地方吗？我目前是没有想到，除非你说会增加前端团队的配备，后端工程师会变的不全能。。。

       äºŒã€å‰åŽç«¯åˆ†ç¦»æž¶æž„方案。

       å®žçŽ°å‰åŽç«¯åˆ†ç¦»ï¼Œä¸»è¦æ˜¯å‰ç«¯çš„技术架构变化较大，后端主要变为restfull风格API，然后加上Swagger技术自动生成在线接口文档就差不多了。

       å¯¹äºŽç›®å‰ç”¨äºŽå‰åŽç«¯åˆ†ç¦»æ–¹æ¡ˆçš„前端技术架构主要有两种：

       Â·ä¼ ç»ŸSPA

       Â·æœåŠ¡ç«¯æ¸²æŸ“SSR

       2.1传统SPA

       ä¼ ç»ŸSPA指的是单页面应用，也就是整个网站只有一个页面，所有功能都通过这一个页面来呈现。因为一个人的肉眼，某一个时间点看一个页面，既然如此何必要不同功能做多个页面呢？只保留一个页面作为模板，然后通过路由跳转来更新这个模板页面的内容不就可以了吗？确实如此，现在通过reac全家桶、tvue全家桶，模块化、路由、wabpack等技术轻而易举就能实现一个单页面应用。

       å•é¡µé¢åº”用的运行流程

       1.用户通过浏览器访问网站url

       2.单页面的html文件（index.html）被下载到浏览器，接着下载html里面引用的css，js。

       3.css，js下载到浏览器完成之后，浏览器开始解析执行js向后端服务异步请求数据。

       4.请求数据完成后，进行数据绑定、渲染，最终在用户浏览器呈现完整的页面。

       2.2服务端渲染

       æœåŠ¡ç«¯æ¸²æŸ“的方案指的是数据绑定，渲染等工作都放在服务端完成，服务端向浏览器输出最终的html。大家看完这个是不是有个疑问，这不是又回到了前后端不分离的时代了吗？答案是否定的，因为这里的服务端是用来执行前端数据绑定、渲染的，也就是把浏览器的一部分工作分担到了服务端。而目前具备这只种能力的服务端是NodeJs服务端。

       å®ƒçš„原理其实就是在浏览器与前端代码中间插入了一个NodeJs服务端。浏览器请求前端页面时，会先经过NodeJS服务端，由NodeJs去读取前端页面，并执行异步后端API，获取到数据后进行页面数据绑定，渲染等工作，完成一个最终的html然后返回浏览器，最后浏览器进行展示。

       æœåŠ¡ç«¯æ¸²æŸ“应用的运行流程：

       1.用户通过浏览器访问网站url

       2.NodeJS服务端接收到请求，读取到对应的前端html，css，js。

       3.NodeJS解析执行js向后端API异步请求数据。

       4.NodeJs请求数据完成之后，进行数据绑定、渲染，得到一个最终的html。

       5.NodeJs向浏览器输出html，浏览器进行展示。

       PS：其实本质就是把前端编写成一个nodeJs的服务端web应用。实施服务端渲染后，我们最终运行的是一个Nodejs服务端应用。而单页面应用是把静态页面部署到静态资源服务器进行运行。

       çœ‹åˆ°è¿™é‡Œï¼Œä½ æ˜¯å¦åˆæœ‰ç–‘问，为什么要这么麻烦搞服务端渲染呢？

       2.3SPA与服务端渲染方案对比

       SPA的优点是开发简单，部署简单；缺点是首次加载较慢，需要较好的网络，不友好的SEO。

       so，以下就是使用服务端渲染的理由了（摘取vue官方说法）：

       ä¸Žä¼ ç»ŸSPA(单页应用程序(Single-PageApplication))相比，服务器端渲染(SSR)的优势主要在于：

       Â·æ›´å¥½çš„SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

       è¯·æ³¨æ„ï¼Œæˆªè‡³ç›®å‰ï¼ŒGoogle和Bing可以很好对同步JavaScript应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示loading菊花图，然后通过Ajax获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果SEO对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

       Â·æ›´å¿«çš„内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。

       æ— éœ€ç­‰å¾…所有的JavaScript都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。

       ä½¿ç”¨æœåŠ¡å™¨ç«¯æ¸²æŸ“(SSR)时还需要有一些权衡之处：

       Â·å¼€å‘条件所限。浏览器特定的代码，只能在某些生命周期钩子函数(lifecyclehook)中使用；一些外部扩展库(externallibrary)可能需要特殊处理，才能在服务器渲染应用程序中运行。

       Â·æ¶‰åŠæž„建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于Node.jsserver运行环境。

       Â·æ›´å¤šçš„服务器端负载。在Node.js中渲染完整的应用程序，显然会比仅仅提供静态文件的server更加大量占用CPU资源(CPU-intensive-CPU密集)，因此如果你预料在高流量环境(hightraffic)下使用，请准备相应的服务器负载，并明智地采用缓存策略。

       ä»¥vue为例，实施服务端渲染可以查看官方指南：，或选择Nuxt.js

       2.4预渲染技术

       å¦‚果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如/,/about,/contact等）的SEO，那么你可能需要预渲染。无需使用web服务器实时动态编译HTML，而是使用预渲染方式，在构建时(buildtime)简单地生成针对特定路由的静态HTML文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

       å¦‚果你使用webpack，你可以使用prerender-spa-plugin轻松地添加预渲染。它已经被Vue应用程序广泛测试-事实上，作者是Vue核心团队的成员。

       prerender-spa-plugin:

       ä¸‰ã€å‰åŽç«¯åˆ†ç¦»æŠ€æœ¯é€‰åž‹

       -artTemplate+bootstrap（不推荐，不算完全前后端分离）

       -vue全家桶（推荐）

       -react全家桶（推荐，生态全）

web前端需要学什么？

       这里整理了一份web前端学习路线的思维导图，需要掌握和学习的源码内容如下：

       第一阶段：专业核心基础

       阶段目标：

       1. 熟练掌握HTML5、CSS3、源码Less、源码npm 控件修改源码Sass、源码响应书布局、源码移动端开发。源码

       2. 熟练运用HTML+CSS特性完成页面布局。源码

       4. 熟练应用CSS3技术，源码动画、源码弹性盒模型设计。源码

       5. 熟练完成移动端页面的源码设计。

       6. 熟练运用所学知识仿制任意Web网站。源码

       7. 能综合运用所学知识完成网页设计实战。

       知识点：

       1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

       2、CSS3选择器、伪类、过渡、幼儿网站源码.cow变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

       3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

       4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

       第二阶段：Web后台技术

       阶段目标:

       1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

       2. 熟练掌握JavaScript的查询用工具源码基本数据类型和变量的概念。

       3. 熟练掌握JavaScript中的运算符使用。

       4. 深入理解分之结构语句和循环语句。

       5. 熟练使用数组来完成各种练习。

       6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

       7.DOM和BOM实战练习和H5新特性和协议的学习。

       知识点：

       1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

       2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

       3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

       4、h5相关api、无量上涨指标源码canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

       第三阶段：数据库和框架实战

       阶段目标：

       1. 综合运用Web前端技术进行页面布局与美化。

       2. 综合运用Web前端开发框架进行Web系统开发。

       3. 熟练掌握Mysql、Mongodb数据库的发开。

       4. 熟练掌握vue.js、webpack、elementui等前端框技术。

       5. 熟练运用Node.js开发后台应用程序。

       6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

       知识点：

       1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。php成品网页源码

       2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

       3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

       4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

       第四阶段：移动端和微信实战

       阶段目标：

       1.熟练掌握React.js框架，熟练使用React.js完成开发。

       2.掌握移动端开发原理，理解原生开发和混合开发。

       3.熟练使用react-native和Flutter框架完成移动端开发。

       4.掌握微信小程序以及了解支付宝小程序的开发。

       5.完成大型电商项目开发。

       知识点：

       1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。

       2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

       3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

       4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。

Mathjax加载慢，如何在Nuxt中加载本地JS文件

       在 Vue 或 Nuxt 中如何渲染数学公式？本文将探讨在 Nuxt 中使用 Mathjax 的方法。尽管使用 CDN 加载 Mathjax 便于集成，但它可能影响页面性能，导致加载速度变慢。

       为提升性能，本地加载 Mathjax 提供了一种解决方案。你只需通过 npm 将 Mathjax 安装至项目中即可。

       然而，要在 Nuxt 中整合 Mathjax 并非易事，因可用资源有限，且遵循官方文档可能不适用于 Nuxt。此时，本地加载 Mathjax 的 JS 文件成为了一种可行且简便的方法。

       以下是具体操作步骤：

       1. 下载 Mathjax v4.0.0-beta.6 的源代码。

       2. 将所有 Mathjax 文件放置于 `public/mathjax` 目录下。若使用 VSCode 编写 Nuxt 项目，请避免报错 `To enable project-wide JavaScript/TypeScript language features, exclude large folders...` 的情况。

       3. 修改 `nuxt.config.ts` 文件以确保正确配置。

       通过本地加载 Mathjax 的 JS 文件，你可以在不牺牲性能的前提下，高效地在 Nuxt 应用中渲染数学公式。

Nuxt.js踩坑记，利用Nuxt一键生成多页面静态站点

       本文介绍使用Nuxt.js创建多页面静态站点的方法，利用Nuxt.js的模板、路由配置、模块、插件和页面布局等功能，实现快速开发。

       Nuxt.js是一个基于Vue.js的通用应用框架，它预设了服务端渲染应用所需的各种配置，简化了开发过程。

       Nuxt.js提供了多种模板，包括starter-template、typescript-template、express-template等，用于快速创建项目。使用vue-cli可以轻松安装Nuxt.js，并生成项目结构。

       项目配置方面，Nuxt.js默认配置覆盖了大部分使用情形，可以使用nuxt.config.js进行自定义设置，包括路由、模块、插件和页面布局等。

       路由配置基于pages目录结构生成vue-router模块的路由配置，可以修改或添加新路由。Nuxt.js社区提供router-module等模块，实现更加个性化的自定义路由。

       插件可以向Vue注入常用属性或方法，例如埋点插件用于统计PV页面浏览量。埋点插件通过plugins配置项实现，设置watch参数监听路由变化，确保每次页面进入或跳转时自动统计。

       页面元信息可以通过head方法设置，避免重复的meta标签，使用hid键为每个meta标签赋予唯一标识。seo.config.js文件可以抽取公用的头部信息，与页面路由关联，实现个性化设置。

       Nuxt.js中引入了layout概念，将页面划分为三层：layout、page和component，提供灵活的布局方案。指定布局可以使用页面文件中的layout属性，不指定时默认使用default布局。

       状态管理方面，Nuxt.js支持vuex，无需额外配置，只需在项目根目录创建store文件夹。store支持普通方式和模块方式，实现状态树的划分。

       一键静态化功能可以生成应用的静态目录和文件，方便部署。静态化时需注意资源版本更新问题，通过git控制上线，实现版本智能更新，避免文件名变动导致的git清理需求。

       虽然在静态化编译时遇到一些问题，例如Nuxt.js和vue-server-renderer模块之间的兼容性问题，但可以通过修改源码或使用npm模块间接解决。

       本文介绍了Nuxt.js的多个核心功能及其使用方法，旨在帮助开发者快速构建多页面静态站点。如有疑问或需要进一步了解，欢迎交流讨论。