“心通达OA实现了单位管理逐步转变到无纸化办公，提高信息化水平，让我们公司日常工作变得更加便捷。”—— 金徽酒股份有限公司 一、业务背景金徽酒拥有得天独厚、不可复制的酿酒条件。目前，公司已发展成为以优质白酒酿造为主，集科技研发、物流配送、网络营销、观光旅游为一体的现代化大型白酒企业，正在着力加强以优化产能为主的基础设施建设、以提升自主创新研发能力为主的专业技术团队建设、以倡导健康绿色消费激发正能量为核心的品牌价值建设和省内外市场建设。二、业务痛点1. 线下审批流程繁琐，审批进度慢，工作效率低下；2. 公司领导经常出差，造成审批单滞后，给工作带来不便，工作效率低；3. 由于每天发起的申请非常多，纸张浪费严重；4. 共享资料通过QQ、微信、网盘等进行传输，资料难找，或使用了错误的文档资料，造成工作失误；5. 公共信息发布不及时，通过QQ群、微信群发布，不规范，且无法知晓哪天人员未阅读。 三、产品价值产品主要为用户提供以下功能服务：（1） 行政办公：事务及时提醒，加快企业办公速度。所有公共信息由OA系统发布，包括电子邮件，公告通知，新闻，投票等信息。 （2）工作流：通过各式各样的电子流程，将整个企业的管理完全的电子化，大大提高企业的工作效率，数据更安全，管理更清晰，进一步实现无纸化办公，更节约了成本。 （3） 知识管理：提供个人文件柜、共享文件柜、公共文件柜以及网络硬盘等功能，将本地资料保存到服务器，共享了公司基础管理文件，实现了一个基于OA内部的企业知识库，以便员工学习交流。（4）资源管理：实现会议申请、管理、查询等信息系统化管理。（5）系统管理：实现企业内部部门、用户、角色、岗位、职务、行政办公管理以及系统资源、系统信息管理，便于企业自主维护系统。通过多次升级维护，保证千人以上用户同时在线的未定运行。 （6）多端一体化办公：实现Web服务端、Windows客户端、iPhone客户端和Android客户端等多终端办公一体化。web网页端登陆,支持所有主流浏览器访问，实现自由办公。（7）即时通讯方面：支持群组聊天、发表情、文字、图片、附件、定位、消息撤回、消息记录自动保存、多设备聊天记录同步、消息离线推送、消息免打扰、置顶聊天、@功能、聊天记录搜索、文件与图片检索、创建群组、退出群组等多达数十项主流微信类应用功能，操作体验更符合用户习惯。 四、改变与提升1. 工作效率大幅提升，以前一个普通的借支流程需要一周甚至更长时间，现在通过OA系统一天内就可完成，领导直接用移动端进行审批，非常便捷；2. 通过OA系统进行流程审批、信息发布等，纸张节省近一半，给企业带来很大价值；3. 资料查找十分便捷，只需要1分钟不到就能快速找到需要的文档资料；4. 内部员工信息查找方便，只需在OA精灵中搜索就能快速找到联系人电话邮箱等；5. 心通达OA建立在华为云上，大大的降低了用户服务器维护成本，且在安全性上也有了保障，华为云DDoS高防、Web应用防火墙 WAF 以及企业主机安全 HSS可以帮助企业有效抵御安全威胁，保障数据资产安全。文中提到的商品：心通达OA（严选商城在售）【华为云云市场，助您上云无忧】

手动在Centos7.6系统上部署web方式完成，并且在浏览器中重置密码登陆成功！在window系统安装官网1.48.1的VSCode，并安装工具插件完成“配置服务器”完成“登陆”，输入正确账户密码

发文路径：博客发文的标题名：web前端开发之JavaScript：npm简介帖子内容链接：https://bbs.huaweicloud.com/blogs/196084谢谢

## 一、 场景和问题 树结构，多级嵌套（不确定几级），使用递归方式实现，数据量上万情况下，页面加载很慢。 数据结构：十个父级节点，每个父节点有10000个子节点，父子是嵌套关系 #### 代码：  #### 页面加载：  此时页面渲染需要13.5s ## 二、问题解决 #### 2.1 树数据结构扁平化  从performance工具定位问题：调用栈createChildren被疯狂调用，在vue源码中，createChildren做的是创建Vue实例这件事。创建Vue实例包括依赖收集、响应式监听、数据事件绑定、编译模板等等。 如果能将数据结构扁平化，就只会有一个tree组件，createChildren只执行进行一次。 扁平化数据还有个好处就是： + 减少栈的读取，递归的本质是栈的读取，栈的读取是由解析器做的，扁平化可以减少V8引擎的开销。 + 扁平化数据可以减少dom 的数量。  扁平化后优化到6.5s，我们觉得6.5s还是远远不够 #### 2.2 虚拟长列表 我们可以用懒加载解决海量数据一次性加载的问题，但是最终dom数量还是很大，容易造成页面卡顿。 所以我们使用虚拟长列表解决这个问题：  通过虚拟长列表，我们就控制住了DOM数量。 #### 2.3 其他优化思考 滚动事件加防抖，但要保证滚动的平滑度，使我们需要去权衡的。样式直接在数据中输出，不通过计算：树结构缩进padding距离不通过层级计算，而是在数据中直接给出样式，避免每个节点都计算一次样式的性能问题。

1.请问一下，多个生产环境如何切换数据源发布？2.是否支持web应用和app的兼容开发？

HDZ研习社19期8月23日 15：00将由HDZ广州核心组成员、华为云MVP崔宇老师带来《一节课看透Web前端开发职业技能等级证书》扫描海报下方二维码，立即报名直播报名地址：https://bbs.huaweicloud.com/signup/946ae870f78745c5ae5976b80369b98a【讲师介绍】崔宇，高校软件技术专业主任专长领域：小程序云开发、人工智能移动应用开发、多端开发、区块链【直播内容介绍】本次直播将介绍2019年Web前端开发职业技能等级证书制度Web前端开发证书的备考准备、知识点、技能点以及职业能力要求【奖品设置】在本帖中针对直播内容进行提问直播结束后1周嘉宾将选出5个优质互动被抽中的用户可获得HDZ三合一数据线一个 中奖名单公布啦！！ linghz666zero_one小田同学Hello Diggerludierr请以上小伙伴于9月4日前添加小助手微信号：Huawei-HDZ发送姓名联系方式和邮寄地址逾期视为放弃小伙伴们，快点行动起来吧扫描下方二维码，了解更多详情~

本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题。通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。1.web前端项目的结构是怎样的？文件有哪些命名规范？项目结构规范页面文件：以项目名命名，例如：shopjs文件：命名为jscss文件：命名为css图片文件：命名为images数据文件：命名为data文件存储规范：按项目模块分类存储，例如：用户信息管理页面文件存放： shop/userinfo/userlist.htmljs文件：js/userinfo/userlist.jscss样式：css/userinfo/userlist.css注意：图片的分类一般按照功能作用划分，比如： 小图标、动画图片动画图片：images/gif/…图标库：images/flags/…项目文件命名规范页面/js/css文件规范：项目名称-模块名称-页面名称，例如：shop-user-index.html用户模块的首页。注意：js一般会包含 公共js 习惯命名commo.js；css样式会包含公共css，习惯命名为 common.css。2.谈谈浏览器的兼容性这个问题是非常抽象的，越是抽象的问题越能表现出我们的表达能力，而面试官就喜欢根据你的回答来追问，不断地打断你的思路，这个时候不要慌，一定要坚信自己。回答思路我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，我之前的项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了这些最基本的要求，在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了html部分1.H5新标签在IE9以下的浏览器识别<!--[if lt IE 9]><script type="text/javascript" src="js/html5shiv.js"></script><![endif]-->2.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0CSS样式的兼容性1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 IE的条件注释hack： <!--[if IE 6]>此处内容只有IE6.0可见<![endif]--> <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍 解决办法：display:block;3.IE6下图片的下方有空隙 解决方法：给img设置display:block;4.IE6下两个float之间会有个3px的bug 解决办法：给右边的元素也设置float:left;5.IE6下没有min-width的概念，其默认的width就是min-width6.IE6下在使用margin:0 auto;无法使其居中 解决办法：为其父容器设置text-align:center;7.被点击过后的超链接不再具有hover和active属性 解决办法:按lvha的顺序书写css样式，":link": a标签还未被访问的状态；":visited": a标签已被访问过的状态；":hover": 鼠标悬停在a标签上的状态；":active": a标签被鼠标按着时的状态；8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序9.IE6下无法设置1px的行高，原因是由其默认行高引起的 解决办法：为期设置overflow:hidden;或者line-height:1px;JavaScript的兼容性1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。 比如：var year= new Date().getYear();5.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同其他浏览器：parentNode parentNode.childNodes IE：parentElement parentElement.children3.页面优化有哪些方法页面优化的方法非常多，最好能够对这些优化方案进行分类，这些方案最好能够结合实际开发遇到的问题来表述。优化的方案减少操作量尽量减少 HTTP 请求1) 合并文件，比如把多个 CSS 文件合成一个； 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；不要在 HTML 中使用缩放图片缩放图片并没有减少图片的容量，只是控制了图片的大小。Image压缩使用工具对图片进行压缩，保证质量的同时减少了图片的大小。减少对DOM的操作减少对DOM的操作，减少页面的重绘。提前做加载操作对域名进行预解析例如京东的做法<link rel="dns-prefetch" href="//misc.360buyimg.com" />预载入组件或延迟载入组件把 CSS 放到代码页上端 CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。使用 new Image对象，对图片进行缓存提升并行加载切分组件到多个域 ，提升服务器的响应能力JavaScript和CSS优化从页面中剥离 JavaScript 与 CSS剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。精简 JavaScript 与 CSS 使用工具压缩JavaScript和CSS文件脚本放到 HTML 代码页底部减少对页面的阻塞。异步加载使用Ajax实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。4.页面渲染原理是什么？这是一道纯理论的题目，只要能够将浏览器的渲染过程很专业的表述出来，一定会得到面试官的青睐，作为一枚前端人员确实有必要了解一下浏览器的渲染过程是怎样的，对于页面性能的提升是有帮助的。解题思路渲染引擎是干什么的渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件可以显示PDF格式。渲染引擎不同的浏览器有不同的渲染引擎，对于渲染引擎的使用总结如下：Trident(MSHTML)内核：IE,MaxThon,TT,The World,360,搜狗浏览器等Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto内核：Opera7及以上Webkit内核：Safari,Chrome等解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树步骤详细解释第一步：渲染引擎开始解析html，根据标签构建DOM节点第二步：根据css样式构建渲染树，包括元素的大小、颜色，隐藏的元素不会被构建到该树中。第三步：根据css样式构建布局树，主要是确定元素要显示的位置。第四步：根据前面的信息，绘制渲染树。5.什么是响应式开发？响应式开发是前端开发工作比较常见的工作内容，随着移动互联网的发展，移动端设计越来越重要，很多项目都是移动端项目先开发，而后是PC端的开发，为了降低运营成本和开发成本，同一个网站要能兼容PC端和移动端显示呼之欲出，进而响应式开发成了前端开发人员必备的技能，所以响应式开发的技术必须掌握。什么是响应式顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。需要用到的技术1. Media Query（媒体查询）用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。2. 使用em或rem做尺寸单位用于文字大小的响应和弹性布局。3. 禁止页面缩放<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />4. 屏幕尺寸响应a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。响应式设计注意事项1.宽度不固定，可以使用百分比#head{width:100%;}#content{width:50%;}2. 图片处理图片的宽度和高度设置等比缩放，可以设置图片的width为百分比，height:auto;背景图片可以使用background-size 指定背景图片的大小。6.html5有哪些新特性、移除了那些元素？题目涉及到范围非常的大，如果要面面俱到显然半天都答不完，可以先罗列出H5的一些新特性，不要回答那么具体，等面试官提具体的问题，所以在面试之前也要把这里的技术过一遍，至少每个技术也要做个小程序出来体验一下。H5新特性增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在绘画 canvas;类似windows自带的画图板，可绘制线、框、路径、图……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。画图需要的要素a) 笔，用笔可以画线、圆、矩形、文本等b) 颜色c) 画板由于画布案例比较多，代码比较复杂，可以在w3cschool上查看相关教程2) 本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失;1.特点数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串。2.数据存取方式localStorage.a = 3;//设置a为"3"   localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值   localStorage.setItem("b","isaac");//设置b为"isaac"   var a1 = localStorage["a"];//获取a的值   var a2 = localStorage.a;//获取a的值   var b = localStorage.getItem("b");//获取b的值   var b2= localStorage.key(0);//获取第一个key的内容   localStorage.removeItem("c");//清除c的值   localStorage.clear();//清除所有的数据推荐使用：getItem()setItem()removeItem()3.事件监听if(window.addEventListener){    window.addEventListener("storage",handle_storage,false);//   }else if(window.attachEvent){ //兼容IE    window.attachEvent("onstorage",handle_storage);   }   function handle_storage(e){    }对象e为localStorage对象，Chrome、Firefox支持差，IE支持较好。3) sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage4) 用于媒介回放的 video和 audio 元素;5) 语意化更好的内容元素，比如article、footer、header、nav、section;6) 表单控件，calendar、date、time、email、url、search;7) 新的技术webworker(专用线程)8) websocketsocket通信9) Geolocation 地理定位移除的元素纯表现的元素<basefont> 默认字体，不设置字体，以此渲染<font> 字体标签<center> 水平居中<u> 下划线<big> 大字体<strike> 中横线<tt> 文本等宽框架集<frameset><noframes><frame>

您可以使用以下浏览器访问华为云会议管理平台。IE 11版本。Chrome 46及以上版本。FireFox 41及以上版本。输入用户帐号和密码（开户成功后，该帐号密码可从邮件或短信中获取）登录华为云会议管理平台。如果还有疑惑，可以点击链接看详细描述哦！里面有清晰的图文解释哦！——https://support.huaweicloud.com/meetingadmin-meeting/meeting_login.html

web前端全栈成长计划已顺利完成感谢大家的积极参与和支持相信无论是任何基础的开发者都在第二阶段有所收获现在，web全栈已开启下一阶段版主帮大家把第二阶段的所有内容都整理到本帖中让各位开发者方便回看各个内容↓↓↓课程相关内容- 课程观看入口：   点此查看课程课程为录播，现在报名还可观看相关内容- 课程大纲：   点此查看课程大纲-第二阶段直播回看链接：1.8月13日【大厂前端经典面试题解析】直播回放地址：https://bbs.huaweicloud.com/videos/103100学习打卡任务内容及奖励安排课程表学习任务安排积分奖励各学习任务打卡1.随堂测验打卡贴：【WEB前端全栈成长计划】第二阶段·每章随堂测验打卡帖2.学习笔记征集帖：【WEB前端全栈成长计划】第二阶段·每周学习笔记征集帖3.前端技术文章征集帖：【WEB前端全栈成长计划】第一阶段·前端技术文章征集帖4.最终考核打卡帖：【WEB前端全栈成长计划】第一阶段•最终考核打卡帖5.分享海报活动链接：https://bbs.huaweicloud.com/forum/thread-65155-1-1.html6.最终积分排名和最终考核成绩排名：https://bbs.huaweicloud.com/blogs/195440积分和抽奖1.第二阶段考核与积分最终排行榜：2.每周抽奖结果其他学习与活动内容1.【web前端全栈成长计划】学习情况调查问卷，和版主反馈下你的态度？发发牢骚？学习调查问卷点这里点这里点这里2.云服务器、云数据库等16+热门产品免费试用，点击链接抓紧时间领取：（详细领取规则参见活动描述）云服务器免费试用点这里点这里点这里3.奖励彩蛋：【WEB前端全栈成长计划】追加福利，快来围观~本次积分前100名的用户，可享受申请云享专家直通车的权益。本次云享专家直通车，是让各位优秀的开发者进行申请后直接通过初审，进行终审。本次申请成为云享专家，可以获得礼品+100代金券。专家资料介绍链接：https://bbs.huaweicloud.com/blogs/112362?from=singlemessage&isappinstalled=0云享专家申请链接：https://bbs.huaweicloud.com/community/certifiedinfo4.云声送Mate Pad啦，云声平台8月建议反馈活动如期而至，这次为您准备了华为平板，荣耀手环等，您的建议越详尽越好，可以采用图文方式描述存在的问题和解决方案，还在等什么，赶快来云声提交优化建议吧~https://bbs.huaweicloud.com/activity/suggestion.html

【WEB前端全栈成长计划】第三阶段·分享有礼活动~◎分享要求：转发上方活动海报至朋友圈，+转发语：华为WEB前端全栈成长计划三阶段，用1个月带你破解前端神器Node&Vue的秘密！，公开可见保持2小时以上，将转发内容截图回复至下方评论区即可！◎分享活动期限：即日起-8月31日23:59，结束即抽奖◎中奖方式：前30名有效分享，必得华为云定制3合1数据线 //以版主点评认证的顺序为准哦，图片为准，占楼无效，以版主回复有效楼层为主~                  30名后每10个有效楼层，抽取1位幸运用户，奖励华为云定制3合1数据线各位开发者们，抓紧时间参与分享呀~◎活动规则：1. 版主会在分享期时间结束后10个工作日内开奖，本次开奖以版主回复为准，中奖名单将公布在第一层评论区，请大家保持关注~2. 每用户仅可获得一次奖励，奖品颜色随机且数量有限发完即止。3. 本次活动回帖内容需满足华为云论坛发帖规范：https://bbs.huaweicloud.com/forum/thread-23077-1-1.html

【WEB前端全栈成长计划】第三阶段·前端技术文章征集帖（请严格按照回复示例进行回复，格式不对会影响获奖哦~） 为了巩固大家的学习成果，紧跟学习进度请将需要完成的前端技术文章内容按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~征集时间2020.08.19-2020.09.20 23:59征集要求1.本学习阶段任意时间内，在【华为云】-【博客】发表与WEB前端开发的任意博客内容，可以是开发技术技巧，可以是开发心得体会，不可以发布课程笔记作为博文，将文章链接回复至本帖内2.文章需为原创，在发布博客时，需要勾选文章创作类型：原创文章一项。用户承诺，发表的文章不存在任何知识产权问题并自行承担全部责任3.文章字数≥600字，图文并茂，不得抄袭网站课程，需写自己的理解和技术分享4.回复格式：华为云ID+博客文章链接5.如果曾在外部博客发表过的文章，可将文章迁移到华为云博客即可6.技术文章由华为技术专家评审，评审通过会对应的积分，不过专家会给出对应的评语且积分为0奖励方式每阶段每篇有效博客文章可获得10积分，每阶段获取上限100分，阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励哦！此外还有附加奖励，每阶段奖励作者300元华为云代金券/篇每阶段评选1篇最佳博文，奖励华为GT智能手表~积分排行榜奖品                                                 活动注意事项1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成提交前端技术文章博客链接任务，可获得的积分上限为100分/每阶段；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：提交前端技术文章>提交每周学习笔记>每章随堂测验打卡；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-57007-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看：查看随堂测验打卡帖：https://bbs.huaweicloud.com/forum/thread-71825-1-1.html查看学习笔记征集帖：https://bbs.huaweicloud.com/forum/thread-71831-1-1.html

【WEB前端全栈成长计划】第三阶段·每周学习笔记征集帖为了巩固大家的学习成果，紧跟学习进度请将需要完成的每周学习笔记按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~征集时间2020.08.17-2020.09.27 23:59征集要求在本帖中，回复自己本周课程内容的学习笔记回复格式：华为云ID+第几周笔记+笔记内容，并分享些读书心得（字数≥200字）示例图如下：奖励方式每周每篇有效笔记可获得5积分阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励哦！此外还有附加奖励，每周在本周内提交学习笔记的用户中，抽取10位幸运奖奖励华为云定制文件收纳包 积分排行榜奖品 活动注意事项1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成提交学习笔记任务，可获得的积分上限为5分/每周；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：提交前端技术文章>提交每周学习笔记>每章随堂测验打卡；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-57007-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看：查看随堂测验打卡帖：https://bbs.huaweicloud.com/forum/thread-71825-1-1.html查看前端技术文章征集帖：https://bbs.huaweicloud.com/forum/thread-71835-1-1.html

【WEB前端全栈成长计划】第三阶段·每章随堂测验打卡帖（请严格按照回复示例进行回复，格式不对会影响获奖哦~）（回复格式：华为云ID+截图）为了巩固大家的学习成果，紧跟学习进度请将需要完成的每章随堂测验内容按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~打卡时间2020.08.19-2020.09.27 23:59打卡要求在本帖中，回复对应章节的随堂测验并提交截图 ↓                                              章节作业位置：打卡回复格式：华为云ID+课程完成截图，如图所示↓↓↓华为云ID：grandmaster奖励方式每章节每次有效打卡可获得2积分阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励！此外还有附加奖励，每周在本周内提交随堂测验的用户中随机抽取10位幸运奖奖励华为云定制数据线 积分排行榜奖品 活动注意事项 由于本帖回复内容为随堂测试结果，已设置回帖仅版主可见1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成随堂测验打卡任务，可获得的积分上限为2分/每章节；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：提交前端技术文章>提交每周学习笔记>每章随堂测验打卡；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-57007-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看：查看学习笔记征集帖：https://bbs.huaweicloud.com/forum/thread-71831-1-1.html查看前端技术文章征集帖：https://bbs.huaweicloud.com/forum/thread-71835-1-1.html

附上最近很火的前端课程一枚同学的实战经验 如何提高全栈编码效率 分享给大家学习 感觉优秀则采纳~学了Web全栈开发，就得动手实践，要动手，得先有开发环境。比如要开发python代码，是先在自己机器上安装python3，然后安装pycharm社区版其实这些事情，说难不难，说容易也不容易说难，你难在哪里了？准备个环境还难了，啥活都还没干呢？说容易，很容易吗？下载、安装、配置，也还要折腾，有时碰到什么环境问题、版本适配问题，也伤神本来按老师的课程来的话，是要用node.js的Koa框架的，不过二阶段学习它只是配角，主角是js和ajax。所以后台先暂时用Python在本地pycharm里写python代码，很方便，编码提示等辅助功能能大大加快编码速度，包括自动保存，修改的自动加载，开发非常的高效率这些高效率，在CloudIDE，样样都有，一点也没落下。CloudIDE却有本地pycharm比不上的，那就是当你编写模板页面html时，CloudIDE就像VS Code一样的方便，而pycharm还是pycharm，对HTML不感冒，那你写HTML就痛苦了，一个字一个字的敲吧从这一点来看，我以为CloudIDE会将是编程环境的集大成者，可以极大的提高程序员的开发效率。下面切换到课程里用的node.js的Koa框架，按照课程步骤，你需要下载安装node.js，使用npm安装koa脚手架，由于众所周知的原因，你还要配置cnpm以解决网络问题如果使用CloudIDE，网页上点点，新建一个node.js技术栈的实例，基本环境就给你准备好了，直接上手操作，npm直接用，网络没毛病所以上手很快是吧，后面编码、测试、调试也是one条龙的Service，这里就不多说了。对于程序员来说，辛辛苦苦搭环境，曾经是没有办法的事情。如果你说，我想从头做起，我要学搭环境，我要什么都能自己做，我要没网也要编程这也没错，我想说的是，搭环境是一件低附加值的重复劳动第一次搭好是新鲜和获得感，第二次是重复，第三次就好像是某些乏味却不得不做的工作（为了生活）了吃鱼吃鱼身，何必辛苦拆鱼头呢？拥抱CloudIDE吧附图：图1 python3环境图2 nodejs环境，npm直接使用图3 修改监听端口，CloudIDE检测到端口监听，提示端口注册访问图4 访问页面（测试）