前端

一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手

旧时模样 提交于 2019-12-25 21:22:19
《一统江湖的大前端》 系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,活脱脱一个 蹭热点小能手 。如果你也觉得前端的日常开发有些枯燥,不妨一起来看看前端的另一番模样。// 华为云社区首发 为什么你总是下不了班 大部分工程化的项目为方便维护,大多都会采用前后端分离的开发方式,而前端和后端的工作基本也是同时下发的,这时前端开发人员就会很尴尬,后端在干活的时候,领导几乎一定会让你先做个 静态页面 看看,这时候你和后端之间可能只是约定了接口(当然也可能连接口都没约定,那我只能祝你幸福了),并没有数据的传输,没法直接拿到填充网页的数据,如果一次将前端代码写到位,那么打开网页时轻则页面提示没有获取到数据,重则直接报错退出脚本。 而真正的问题在于 静态页面 做起来是非常快的,以至于你的领导会认为当你把 静态页面 中加入javascript的逻辑部分的代码后 也应该非常快 ,而实际上逻辑部分的代码量和联调的工作量几乎是写一个静态页面的 5-10倍 。 基本上前端的一个需求的开发至少需要经历 静态页面 ——>

一统江湖的大前端(6)commander.js + inquirer.js——懒,才是第一生产力

霸气de小男生 提交于 2019-12-25 21:22:12
《一统江湖的大前端》 系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,活脱脱一个 蹭热点小能手 。如果你也觉得前端的日常开发有些枯燥,不妨一起来看看前端的另一番模样。//华为云社区首发 一.[懒]——才是第一生产力 你没有看错, 懒 绝壁是第一生产力,技术的进步,很多时候都是因为一些非常聪明的人难以忍受一些(在他们眼里)枯燥重复且低效的东西,从而发明出的东西,无论这些新发明在经历了迭代和打磨之后看起来多么牛逼耀眼,但其本质基本都可以归纳为: 是聪明的 懒 人搞出的可以让自己更省事的东西。 jQuery的流行,是因为开发者 懒得 为DOM编写跨浏览器兼容性代码 Angular.js的流行, 是因为开发者连DOM都 懒得 操作 Bootstrap的流行, 是因为开发者 懒得 编写自适应样式 Webpack的流行, 是因为开发者 懒得 做一系列上线前的准备工作 ...... 有的人越懒越牛逼,有的人越懒越逗逼,看来懒也是个技术活,懒出高度,懒出艺术,那才是真的高端懒。 二.从GUI到CLI GUI

一统江湖的大前端(4)shell.js——穿上马甲我照样认识你

◇◆丶佛笑我妖孽 提交于 2019-12-25 21:20:11
《一统江湖的大前端》系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,活脱脱一个 蹭热点小能手 。如果你也觉得前端的日常开发有些枯燥,不妨一起来看看前端的另一番模样。 前端开发人员的工作内容几乎很少会涉及脚本的编写,建议将shell.js和git的命令行指令综合在一起作为专题学习,集中学习一下常用指令。更详细的参数请参考专门的shell脚本语言资料进行学习。 一.Shell && Shelljs 码农界存在着无数条鄙视链, linux 使用者对 windows 的鄙视便是其中之一, cli 使用者对 GUI 用户的嘲讽也是如此,在这样一个讲究 逼格 的时代,如果你的桌面上没有一个小黑窗时不时地从下往上翻滚并抛出一些亮绿色的字符串,你真不好意思跟人打招呼。而 前端 这种天生几乎不用和命令行打交道的物种,自然再一次莫名其妙地处在了鄙视链的末端,没错,是再一次。 Shell 是 linux 下的脚本语言解析器,拥有丰富且强大的底层操作权限。 Shelljs 就是基于 node 的一层命令封装插件

一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅

流过昼夜 提交于 2019-12-25 21:17:19
《一统江湖的大前端》 系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了, 手机app开发 , 桌面应用开发 , 用于神经网络人工智能的库 , 页面游戏 , 数据可视化 , 甚至 嵌入式开发 ,什么火就搞什么,活脱脱一个 蹭热点小能手 。如果你也觉得前端的日常开发有些枯燥,不妨一起来看看前端的另一番模样。 一.协作开发引发的问题 前端有个很流行的段子(其实前端有很多流行的段子): 看完你们项目的源码,就知道你们团队有多少个人。 各种命名风格,各种冗余代码,各种缩进风格,各种奇葩注释和各种没有注释, 眼中有码,心中无码,只有 心累 两个字 ,项目的整洁度会受到很多客观因素的影响,为了自己的身心健康,我们应该试图将这种影响降到最低。简单地说,统一格式和风格的代码让人更加赏心悦目,更不容易让你产生想摔键盘的冲动;用一个B格更高的词语,叫做 “熵减” ,也就是降低团队产出代码的无序性,如果你想在未来成为一名合格的前端架构师,这将是你的工作目标。 二.码如其人 从做开发开始,我就是一个名 sublime 的爱好者,随着常用快捷键的熟练和各种插件的配合,自己的开发速度得到了很大提升,毕竟这是一个 颜值决定一切 的时代,作为一个前端

前端知识之HTML内容

回眸只為那壹抹淺笑 提交于 2019-12-25 18:46:19
前端介绍 什么是前端?    凡是与用户进行交互的操作界面都称为前端    比如:手机界面,电视屏幕,电脑显示屏等 web服务的本质    在浏览器上输入一个网址后回车进行的操作    1.朝着指定服务器发送请求    2.服务端接收相应的请求    3.服务端返回相应的响应    4.浏览器接收响应 按照特点的规则渲染页面展示给用户看 import socket server = socket.socket server.bind(('127.0.0.1',9527)) server.listen(5) while True: conn,addr = server.accept() data = conn.recv(1024) conn.send(b'HTTP/1.1 200OK \n\r\n') conn.send(b'HELLO WORLD') conn.close()    HTTP协议 超文本传输协议 规定了浏览器与服务端之间数据传输的格式 四大特性 1.基于请求响应 一次请求对应一次响应 2.基于TCP/IP作用于应用层之上的协议(还有ftp协议) 3.无状态 不保留客户端的状态(不管请求几次,待如初见) 所以就需要 cookie(储存在用户本地终端上的数据) session token 4.无连接 长链接 websocket(类似于http协议的大补丁) 数据格式  

【最新】SSM框架中的前后端分离

被刻印的时光 ゝ 提交于 2019-12-25 16:23:27
文章目录 1.认识前后端分离 2.分离的四个好处 3.利用Swagger UI来规范书写API文档 1.认识前后端分离 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。 由于前后端分离这个概念相对来说刚出现不久,很多人都是只闻其声,不见其形,所以可能会对它产生一些误解,误以为前后端分离只是一种web应用开发模式,只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。 其实 前后端分离并不只是开发模式,而是web应用的一种架构模式 。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式,我们在实施的过程中主要对以下四个方面来进行比较和重新认识。 前后端分离大概可以从四个方面来理解: 交互形式 代码组织方式 开发模式 数据接口规范流程 一、交互形式 在前后端分离架构中,后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的组装和渲染,最终返回给浏览器。 二、代码组织方式 在传统架构模式中,前后端代码存放于同一个代码库中

使用chrome调试前端线上代码

江枫思渺然 提交于 2019-12-25 15:39:08
家都知道在前端开发过程中,为加快网站静态资源加载速度都会对js/css等静态资源进行压缩合并再部署到生产环境,而在实际开发过程中开发人员一般都是在开发环境进行源码文件开发调试的,当部署平台或部署人员将开发人员提交的前端代码进行压缩合并为压缩文件后,当遇到生产环境出现问题之后很难通过压缩文件去定位问题,所以如何让开发人员便利的调试线上代码,并迅速定位问题是部署及运维网站需要考虑的重要考量的地方,此文档教程将描述如何使用chrome浏览器进行线上调试源码问题。 Step-by-step guide 下载chrome浏览器 修改grunt部署打包任务配置,如图 通过Jenkins发布部署项目 访问 http://test.www.****.com/ 网站(站点已对源码进行压缩合并,支持调试压缩文件源码) 打开F12浏览器调试工具界面 勾选设置设置中的Enable Javascript source maps选项 关闭设置后,打开sources选项卡后,F5刷新页面后即可查看调试压缩文件源码 如需查看压缩文件,将设置中的Enable Javascript source maps选项勾选取消即可查看压缩文件,如图 来源: https://www.cnblogs.com/qshting/p/5142514.html

前端开发调试线上代码的两款工具

大憨熊 提交于 2019-12-25 15:38:09
原文: 前端开发调试线上代码的两款工具 用过 Charles 和 Fiddler 这两款,记录如下。 一、Charles Charles 界面简单直观,易于上手,数据请求控制容易,修改也简单,抓取数据的开始暂停也方便。全平台支持 win,mac,linux。 1. 安装前提 Charles 需要有 Java 环境,请提前下载安装 JDK。 JDK 已经 8 了。 根据自己的系统选择对应的JDK。我的是 win7,双击安装,一直下一步就哦了。在命令行窗口输入以下命令,出现截图所示就表示 JDK 安装成功了 2. 下载 Charles Charles 可以去官网 下载 ,如果不追求最新版本,这里也有 破解版 的。安装也是一直下一步就行了。启动界面如下 3. 调试线上代码 现在就可以启动 Charles 来调试了,大概步骤 启动 Charles 打开浏览器(如Firefox),访问调试的地址(比如这里是trip.jd.com) 选择需要调试的文件,前端多数时候是 JS/CSS,下载到本地 把线上的该文件url 映射到 本地下载的文件 这样就任意修改本地文件来查看结果了。 下面以调试 trip.jd.com 测试,修改该页面里引入的 search.js 启动 Charles,浏览器打开 trip.jd.com,可以看到 Charles 已经可以捕捉到该页面的众多请求了 下载 search

Web前端开发的就业前景怎么样,薪资待遇如何

你说的曾经没有我的故事 提交于 2019-12-25 11:45:13
信息技术的迅速发展,使IT技术者们赶上了一个百年难遇的好机会,尤其是国家出台了“互联网+”的政策后,更是催生了IT行业的就业空间,使其呈现爆发性增长。 如今,微信逐渐成为了大家主要的交流工具,随着各种小程序游戏风靡朋友圈之后,其从业人员Web前端开发工程师的薪资可谓是一路高涨。细心观察下大家不难发现,就目前来看,Web前端作为移动互联网时代的前沿技术,不仅在电脑端,而且在手机端也得到了广泛的应用。据预测,Web前端开发在未来5—10年,将会成为移动互联网领域的主宰者。 当然,很多外行人对于“Web前端开发”的了解还只是皮毛,今天小编就为大家详细解释一下Web前端到底是什么。 1、什么是Web前端? 早期互联网时代,电脑端的网站页面主要以静态为主,相对来说也没那么复杂。而现在随着网络信息逐渐丰富,网页发生了很大的变化,企业更加注重用户交互,各种产品层出不穷,好产品想要长久发展,用户体验就变得尤为重要,特别是移动端产品。 Web前端技术主要包括HTML5、CSS3、Less、Sass、响应式布局、移动端开发、以及Ps设计等,更高级的前端开发人员还需要掌握JavaScript 语言、Mysql、Mongodb数据库开发、vue.js、webpack、elementui等前端框架技术。 2、Web前端开发可以从事哪些工作? 学完Web前端开发后,可以从事网站前端工程师、网页制作工程师