当前位置:首页 » 网页前端 » web串口前端
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web串口前端

发布时间: 2023-03-07 01:19:36

A. web实现串口调试助手

最近受朋友之托试图用web前端实现串口调试助手,一开始觉得不太有可行性,以前用过的串口调试助手都是客户端程序。觉得浏览器怎么会有调用电脑上的串口的功能呢。后来朋友找了几个资料给我,说网上有人实现,他看不懂。我看了之后恍然大悟,原来是用node。如此万能。

node 实现操作串口的模块是一个 serialport 的模块,网上一搜有很多好文,此处记录一下实现过程中遇到的一些问题以及解决方法。

一开始被忽略的问题 ,我把 node 服务搭在自己的服务器上,后来返回的串口数组全是一堆令我懵逼的数据。后来想起那是 node 读取了我的
Linux 服务器的串口,而不是用户使用的 pc。

由此引出的两个问题。第一,node 服务必须搭建在用户使用的 pc 上,因此用户使用的电脑必须有 node 环境。第二,用户 pc 一般是 windows 系统, node 的模块很多在 Linux 上很容易安装成功,在 Windows 上安装比较困难。

首先解决的是第二个问题:在Windows上安装serialport失败
解决方法: npm install --global --proction windows-build-tools
参考链接1: https://stackoverflow.com/questions/33142357/unable-to-install-node-js-serialport-npm-package-on-windows
参考链接2: https://github.com/nodejs/node-gyp#installation

安装好之后就可以安装 serialport 模块了。

解决第一个问题:用户电脑的 node 环境
解决方法: electron ——使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 (官网链接: https://electronjs.org/ )(w3c: https://www.w3cschool.cn/electronmanual/wcx31ql6.html )
使用 electron 搭建的桌面应用可以像平常我们使用的 exe 应用程序一样直接运行,不需要搭建环境。

npm install -g electron-prebuilt //提示electron-prebuilt已经更名为electron
npm install -g electron //安装失败
使用淘宝镜像安装问题解决: cnpm install -g electron
参考链接: http://blog.csdn.net/upc_xbt/article/details/53342129

解决方法: npm install -g electron-rebuild
以后每次重新运行 electron . 的时候再执行一次 ``./node_moles/.bin/electron-rebuild` 对原生模块进行rebuild
参考链接: https://www.w3cschool.cn/electronmanual/eqsc1qko.html

参考链接: http://m.blog.csdn.net/u014563989/article/details/75045052
cnpm install -g electron-packager //安装打包工具
electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version版本号 --overwrite --ignore=node_moles

因为打包的时候执行的命令带有 --ignore=node_moles , 即不将 node_moles 里面的依赖包打包,所以在打包后的新文件中,进入resource 目录会发现 node_moles 是一个空文件夹,所以自然找不到依赖包。如果去掉打包时的命令参数 --ignore=node_moles ,则需要非常长的打包时间。我的解决方法是将原来 node_moles 文件夹中的相关的依赖包文件复制进打包后的 node_moles 中,虽然是一个比较无脑的方法,每次打包都要拖动相关文件进去,不过我备份了一个 node_moles 文件夹,下一次打包后就把备份的 node_moles 直接复制进去。

node 模块 ccap : 用于生成验证码图片,可以在 express 后台
res.send(图片) ,前端的 img 的 src设置为请求这个接口。
ccap的用法可以参考链接: https://cnodejs.org/topic/50f90d8edf9e9fcc58a5ee0b

B. web后端和前端是怎么连接的

web后端和前端是怎么连接的

WEB后端和WEB前端可以通过 前端模板引擎 后端模板引擎 进行连接。

后端模板引擎:

WEB前端开发人员开发好前端静态页面,然后交给WEB后端开发人员,他们再利用后端引擎模板(比如:freemarker)把前端页面与后端数据进行连接,形参一个动态页面。

前端模板引擎:

描述成前端模板引擎可能不太对,但是比较好理解吧。当前比较流行的Vue.js、Angular.js、React.js 等MVVM前端框架都自带了前端模板引擎。

WEB前端人员与WEB后端人员一起协定好数据接口格式(请求地址、数据格式、数据字段等),然后WEB前端人员与WEB后端人员同时进行项目的开发,WEB前端人员通过AJAX的方式从WEB后端获取到前端页面的相关JSON数据,然后通过MVVM前端框架把JSON数据渲染到页面里面,最终形成了一个动态页面。

网站数据处理主要分为三层。

第一,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。

第二层,是业务层,这层是负责处理数据的。常用的代码语言有PHP,JSP,Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库,然后把结果返回给前端网页。

第三层,是数据层,这个就是数据库,用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。

举个例子就是这样,比方说你在网页上填一个表格然后提交会有以下几种数据传输经过:

①你接触到的是这个网页是属于表示层,这个网页一般由HTML标签结合CSS/JAVASCRIPT来实现的。 这时候你要先填入数据。

②然后你按提交触发后台处理机制,这时候数据会传到后台的代码进行处理。这部分代码根据不同网站可以使PHP,JSP,JAVA等。 代码根据程序员预设的算法将收到的数据进行处理之后会相应的对数据库进行操作,存储数据等。

③成功操作完数据库之后,业务层的代码会再向表示层也就是显示器端传回一个指令通知你表格填写成功。

这就是基本的网站数据交换逻辑了

后端会暴露出一个处理数据逻辑的接口(api),然后哦前端通过js像后端暴露的api发起请求过程可携带参数,然后后端接到请求后会返回数据给前端,前端拿到数据后会渲染在页面上

治安监控的前端是怎么连接的?

固定摄像机前端有和电源(220V转12V)全方位像像机前端一根视频线(和主机采集卡连接)一根电源线220V(连接解码器)一根通讯线(连接主机上的码转)

后端thinkphp和前端vue怎么协调

hinkphp作为服务端,为客户端提供数据。而Vue是客户端的一个JavaScript框架。便于我们对页面进行处理。
一般情况下,vue通过异步请求来获取数据。由于实例化vue时已经将相关的变量、模板等定义好了。
当获取到thinkphp回传的数据后,将会自动的把数据对应的呈现在网页上。

php在web开发中技术含量排第三(jsp,.在前),但由于php简单,开发周期短,运行速度快,很快就成为中小型网站的首选技术,像CMS全球超过70%都是php的.再说大型网站现在也很少,所以,学习php找工作要容易得多,自己想接私单也容易拿下!
就是这样的,我刚刚在后盾人知道的那边有详细的教学视频.,可以给你学习

thinkphp作为服务端,为客户端提供数据。而Vue是客户端的一个JavaScript框架。便于我们对页面进行处理。
一般情况下,vue通过异步请求来获取数据。由于实例化vue时已经将相关的变量、模板等定义好了。
当获取到thinkphp回传的数据后,将会自动的把数据对应的呈现在网页上。 你看过后很简单吧以后不会可以向我一样经常到后盾人找找相关教材看看就会了,希望能帮到你,给个采纳吧谢谢(⁄ ⁄•⁄ω⁄•⁄ ⁄)

thinkphp 设计服务端,全restful api的规范就行设计(其实只要返回json或xml就可以),
vue-resouve只是一个请求库,和jquery 的 ajax 是大同小异的

C. 什么是web前端

web前端是创建Web页面或app等前端界面呈现给用户的过程。
前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显着,功能更加强大。
(3)web串口前端扩展阅读
发展历程
以前会Photoshop和Dreamweaver就可以制作网页,随着网站开发难度加到、开发方式多样,网页制作更接近传统的网站后台开发,网页制作更多被称为Web前端开发。前端技术包括4个部分:前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe
AIR、Google
Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等。
在Web1.0时代,由于网速和终端能力的限制,大部分网站只能呈现简单的图文信息,并不能满足用户在界面上的需求,对界面技术的要求也不高。随着硬件的完善、高性能浏览器的出现和宽带的普及,技术可以在用户体验方面实现更多种可能,前端技术领域迸发出旺盛的生命力。
2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。
随着手机成为人们生活中不可或缺的一部分,成为人们身体的延伸,人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外,前端技术还能应用于智能电视、智能手表甚至人工智能领域。
参考资料
WEB前端开发——网络

D. web前端主要做的是什么工作

Web前端可以做的工作,可以分为以下几点:


1、Web前端是什么意思

Web前端是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页。

用我们的话来说,前端就是网页给访问网站的人看的内容和页面,Web前端开发意思就是这些内容的制作,也就是代码的实现。

Web 前端开发三大技术 html,css,js

还运用大量的 js 库,可以将前端的交互效果做得更加炫酷,除了基本语言,还要掌握各种开发工具的应用。Dreamweaver:,Sublime,HBuilder等都是比较热门的工具。


前端开发需要掌握的能力很多,知识范围很广,要付出的代价很多。不过,前端的前途也是相当光明的,前端现在正在走向工程化发展,无论权是大小公司企业,对前端开发的需求都是越来越大了,也越来越专业了。


3、朗沃教育Web前端课程做什么


Web 前端除了最基本的 html,css,js 还有大量的技术内容,也会运用到一定的框架,而朗沃教育的 WEB 前端开发一般会学到这些内容。

  • HTML/CSS 基础和高级

  • JavaScript 基础语法和高级应用

  • Node 服务端开发

  • Web前端框架开发(React 技术栈,Vue 技术栈)

  • 移动端开发(React Native,跨端开发框架之微信小程序开发,Flutter,PWA 等)

  • 前端运维(Docker 与 Linux 基本操作等)

详细课程请浏览朗沃教育Web前端课程。


WEB前端是什么?零基础可以学吗?初期阶段只是了解一些Web前端基础内容,后面会涉及到一些Web前端交互的内容,再涉及到服务器的一些知识,最后再学习Web前端的三大框架,再加上一些前端项目。

E. web前端与后端有什么区别 web前端和后端不一样的地方在哪

1、Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

2、Web后端:后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

3、前端开发人员:精通JS,能熟练应用JQuery,懂CSS,能熟练运用这些知识,进行交互效果的开发。

4、后端开发人员:会写Java代码,会写sql语句,能做简单的数据库设计,会Spring和iBatis,懂一些设计模式等。

F. 如何在web页面上获取客户端的串口数据

web页面上获取客户端的串口数据的方法:

可以写一个串口代理程序,读取本地串口,将获取到的数据存入数据库。web通过ajax+定时器获取数据库中的数据显示就好了。

如果要交互,可以搞一个让上面提到的串口程序开一个socket.将串口通信获取的数据,通过socket发出去,web页面可以用websocket。

下面一个通过flash操作ardiuno的demo.用的是类似于第二种交互的方法。只不过用的是ActionScript.原理是一样的。

串行接口是一种可以将接收来自CPU的并行数据字符转换为连续的串行数据流发送出去,同时可将接收的串行数据流转换为并行的数据字符供给CPU的器件。一般完成这种功能的电路,我们称为串行接口电路。

串口通信(Serial Communications)的概念非常简单,串口按位(bit)发送和接收字节的通信方式。

注意事项:

户端的系统数据如果能随便被web页面读取,那大家也不敢随便打开网页了,至于说用IE的ActiveX 控件,这个也没有前途,IE默认不开启,现在有IE的也没什么人,当然如果是用于特定客户的话可以了,反正你想干嘛就干嘛。



G. WEB开发中“前端”和“后端”的区别

通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有巨大的区别,但是他们的工作都是相辅相成的,都是为了更好的用户体验。

1、前端开发:

网站的“前端”是与用户直接交互的部分,包括你在浏览网页时接触的所有视觉内容--从字体到颜色,以及下拉菜单和侧边栏。这些视觉内容,都是由浏览器解析、处理、渲染相关HTML、CSS、Java 文件后呈现而来。前端开发,就是要创造上面提到的网站面向用户的部分背后的代码,并通过建立框架,构建沉浸性的用户体验。为了实现这个目标,开发需要熟练运用下列语言、框架、工具库。

2、后端开发:

为了让服务器、应用、数据库能够彼此交互,后端工程师需要具有用于应用构建的服务器端语言,数据相关工具,PHP框架,版本控制工具,还要熟练使用 Linux 作为开发和部署环境。后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新 Web 应用。但在写代码之前,他们需要与客户沟通,了解其实际需求并转化为技术目标,制定最有效且精简的方案来进行实现。

H. web前端和web后端的区别是什么

web前端和web后端的区别是什么

这一年来,一直在提前端和后端这样两个概念,对于前端后分工的需求也越来越强烈,所以,岗位的分工也根据开发的分工而开始尝试。

海文国际:web前端和web后端的区别是什么

Web前端

顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端,也就是在Web应用中使用者可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的互动实现。

Web后端

后端更多的是与资料库进行互动以处理相应的业务逻辑。需要考虑的是如何实现功能、资料的存取、平台的稳定性与效能等。

我们再来看看大公司对前后端人员招聘的要求,通过这个角度看看前端、后端的技术要求:

Web前端:

  • 精通HTML,能够书写语义合理,结构清晰,易维护的HTML结构。

  • 精通CSS,能够还原视觉设计,并兼容业界承认的主流浏览器。

  • 熟悉JavaScript,了解ECMAScript基础内容,掌握1~2种js框架,如JQuery

  • 对常见的浏览器相容问题有清晰的理解,并有可靠的解决方案。

  • 对效能有一定的要求,了解yahoo的效能优化建议,并可以在专案中有效实施。

  • ……

  • Web后端:

  • 精通jsp,servlet,javabean,JMS,EJB,Jdbc,Flex开发,或者对相关的工具、类库以及框架非常熟悉,如Velocity,Spring,Hibernate,iBatis,OSGI等,对Web开发的模式有较深的理解

  • 熟练使用oracle、sqlserver、MySQL等常用的资料库系统,对资料库有较强的设计能力

  • 熟悉maven专案配置管理工具,熟悉tomcat、jboss等应用服务器,同时对在高并发处理情况下的负载调优有相关经验者优先考虑

  • 精通面向物件分析和设计技术,包括设计模式、UML建模等

  • 熟悉网路程式设计,具有设计和开发对外API接口经验和能力,同时具备跨平台的API规范设计以及API高效呼叫设计能力

合肥中软国际:web前端和web后端的区别是什么

前端开发主要是静态使用者接口加上一些动态效果,不涉及资料逻辑!例如:一个登陆页面:
前端开发只要做好静态页面部分,加上鼠标移入输入框、移出输入框的颜色变化;但是输入使用者名称、密码
后登入系统的话要连线资料库,这个就需要后台开发做逻辑处理了!
在我们实际的开发过程中,我们当前这样定位前端、后端开发人员。
1)前端开发人员:精通JS,能熟练应用JQuery,懂CSS,能熟练运用这些知识,进行互动效果的开发。
2)后端开发人员:会写Java程式码,会写SQL语句,能做简单的资料库设计,会Spring和iBatis,懂一些设计模式等。
前端开发主要是静态使用者接口加上一些动态效果,不涉及资料逻辑!例如:一个登陆页面:
前端开发只要做好静态页面部分,加上鼠标移入输入框、移出输入框的颜色变化;但是输入使用者名称、密码
后登入系统的话要连线资料库,这个就需要后台开发做逻辑处理了!
在我们实际的开发过程中,我们当前这样定位前端、后端开发人员。
1)前端开发人员:精通JS,能熟练应用JQuery,懂CSS,能熟练运用这些知识,进行互动效果的开发。
2)后端开发人员:会写Java程式码,会写SQL语句,能做简单的资料库设计,会Spring和iBatis,懂一些设计模式等。
Web后端:
1)精通jsp,servlet,javabean,JMS,EJB,Jdbc,Flex开发,或者对相关的工具、类库以及框架非常熟悉,如Velocity,Spring,Hibernate,iBatis,OSGI等,对Web开发的模式有较深的理解
2)练使用oracle、sqlserver、mysql等常用的资料库系统,对资料库有较强的设计能力
3)熟悉maven专案配置管理工具,熟悉tomcat、jboss等应用服务器,同时对在高并发处理情况下的负载调优有相关经验者优先考虑
4)精通面向物件分析和设计技术,包括设计模式、UML建模等
5)熟悉网路程式设计,具有设计和开发对外API接口经验和能力,同时具备跨平台的API规范设计以及API高效呼叫设计能力
4首先,我们在前端缺乏积累,没有沉淀,专业的前端技术的积累是从去年才开始的,同时,在前端也缺乏支撑与高手,所以,走起来比较困难。同时,前端人员培养的较少,一个原因是对前端了解太少,另外一个原因就是对前端与后端的工作比例估计不足。所幸,我们在这一年也在前端有了很快的进步,培养了几个优秀的开发人员,有意识的解决了前端的使用者体验,这都是可喜的。今年,需要更进一步,专业化。
5其次,我们在后端发展的不够宽,后端的知识体系已经比较完善,但是,很多应用点都没有涉及到。同时,对现有技术框架的理解都不够深入,太浮躁。我们目前的设计团队在解决网际网路高并发、大资料量的存取上经验与能力都还不足,需要正视这些问题。后端技术的发展需要更加的精进,以解决实际存在的问题为主。

web前端和后端的区别是什么

前端开发和后端开发的区别在于
1、前端开发主要做的是使用者所能看到的前端展示接口
2、后端开发主要做的是逻辑功能等模组,是使用者不可见的
3、前端开发用到的技术包括但不限于 5 css3 javascript jquery
Bootstrap Node.js AngularJs等技术
4、后端开发 以java为例 主要用到的 是包括但不限于Struts spring springmvc Hibernate Http协议 Servlet Tomcat服务器 等技术

web前端和web后端的区别详细分析

web前端和web后端的区别详细分析:
Web前端:
1. 精通HTML,能够书写语义合理,结构清晰,易维护的HTML结构。
2. 精通CSS,能够还原视觉设计,并兼容业界承认的主流浏览器。
3. 熟悉JavaScript,了解ECMAScript基础内容,掌握1~2种js框架,如JQuery。
4. 对常见的浏览器相容问题有清晰的理解,并有可靠的解决方案。
5. 对效能有一定的要求,了解yahoo的效能优化建议,并可以在专案中有效实施。
Web后端:
1. 精通jsp,servlet,java bean,JMS,EJB,Jdbc,Flex开发,或者对相关的工具、类库以及框架非常熟悉,如Velocity,Spring,Hibernate,iBatis,OSGI等,对Web开发的模式有较深的理解。
2. 熟练使用oracle、sqlserver、mysql等常用的资料库系统,对资料库有较强的设计能力。
3. 熟悉maven专案配置管理工具,熟悉tomcat、jboss等应用服务器,同时对在高并发处理情况下的负载调优有相关经验者优先考虑。
4. 精通面向物件分析和设计技术,包括设计模式、UML建模等。
5. 熟悉网路程式设计,具有设计和开发对外API接口经验和能力,同时具备跨平台的API规范设计以及API高效呼叫设计能力。
创客学院职业课程web前端包括了零基础web前端开发从入门到精通视讯教程培训,其移动开发前端课程整合了HTML5开发、CSS3基础课程、PHP培训教程、HTML5例项原始码及其移动前端互动JavaScript+JQuery+Ajex课程学习,通过HTML5例项教程讲解,让从零开始学习web前端的开发者短期内快速掌握web开发技能。

别思考那么多了,现在的前端后端哪还分得那么清楚,你选哪个两边都得学,现在感觉更适合称为Web工程师,共同解决Web方向上的问题。

优逸客介绍web前端开发和web后端的区别

现在学习web前端,5开发还是不错的选择,缺口大,前景好。,当然学习要靠自觉性,坚持学习,就能成功、

移动前端和web前端的区别是什么

移动前端指的是手机等移动装置的接口,也就是说是pc端与wap端的区别,而一般常说的前端大部分指的是web前端了,两者在开发设计所用的语言上也有区别,移动端原生APP,也就是完全使用移动装置系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA。wap或者pc的网页前端都是浏览器里开启的,用纯HTML+CSS+JS。兆隆IT云学院这种web前端学习课程基本上就是以HTML,js,jQuery这些知识为基础重点,然后附以移动端语言学习的。

ui与web前端的区别是什么?

WEB前端倾向于程式码编写和相容性以及布局设计还有前端程式码框架,css,js,xml等技术。

1、UI前端主要负责系统/app,UI接口设计,以及程式码实现,主要工作偏向于设计web前端:主要讲ui提供的设计图,编码成静态,实现所有特效;并负责所有互动的对接,对js要求较高,部分企业会要求一些后台接口的开发工作,因此对后台开发语言也有一定的要求,在前端中算是比较全能型的开发人员。

2、网页前端这个算是web前端,和ui前端的国度,不需要设计UI,但是需要对页面的实现,以及互动的实现,对CSS,JS要求较高,算是UI前端和web前端的中间的过渡项一样。

uid设计和web前端的区别是什么

UI是做设计,接口设计那类,一般用Photoshop、Illustrator、Fireworks、CorelDRAW、Flash,而WEB前端开发是敲程式码的,用+js+css Sql SERVER或ACCESS或MYSQL等。CGWANG教学还是比较有特色的

I. 什么是web前端

web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

J. WEB前端是什么,学完可以做哪些工作

第一,企业官方网站的开发与维护。这个应该是最简单的了,基本上是纯静态页面的展示,就算有交互模块,应该也是比较简单的那种,甚至纯 js 使用类似于 oop 的方式就能够很轻松完成,基础好的话,甚至可以不依赖 jquery 或者 zepto。

第二,门户类型网站的开发与维护。例如像搜狐一样的门户网站,但是我不确定这种业务线是否还在招人,相对来说也不难,但是如果想开发得好,实现高可维护性和扩展性,还是很考验开发人员的抽象能力。可以留意看看,这种网站一般分成很多个模块,每个模块的展现结构是非常类似的。如何做到可复用性强,对产品需求变更迭代时更加友好,那就很考验开发人员前端三大语言的设计模式了。

第三,电商网站。例如京东和淘宝,里面不仅有对用户友好的展现方式,合乎逻辑的交互方式,还会涉及到网站、商品的色彩设计、排版设计、交互设计,虽然可能都由设计师来出方案,但是前端开发同学可以从中学到很多东西。此外,除了单纯的展现,你需要考虑更多的东西了。例如,不同端的字体展现,响应式布局,图片大小,静态资源缓存,CDN部署,ajax动态数据交互。这些还都是偏纯展现的。还会有涉及到个人信息填写、支付款项、密码输入等等,会涉及到一系列的前端安全问题,这部分也是很锻炼人的。

第四,后台管理系统。一般这个是给内部人员使用的,所以可以不用考虑太多的兼容性,直接要求统一使用谷歌浏览器或者火狐。这时候要考虑更多地是如何与后端进行数据交互的问题。小公司还好,后台基本没有精力做微服务,API的设计也不会趋近于原子粒度,基本前端需要什么数据,那就有后台的API统一提供,前端只管展现,而且将交互做得好一点就行了。如果是大公司又不一样了,如果后台做了微服务,而且API的设计粒度很小,那前端为了保持接口的统一,可能就需要加一块 node 中间层,来聚合不同接口的数据,然后统一返回给前端。还有就是会涉及到敏感权限校验、角色权限控制、接口读写权限分离与控制等等,也是一大块的学问。

第五,H5的活动营销页、红包落地页、明星投票页等等一系列与营销活动相关的移动端页面。这些需要你的 CSS 功底非常扎实,常常要写一些动态效果、动画效果,越生动越吸引用户参与。另外同样考验你对不同机型不同移动浏览器的兼容性问题,还有响应式布局。数据交互层面的话,一般不会太多,但是一定会有打点上报,用来分析页面性能。还有一些要根据不同的营销参数、渠道参数来展现不同的内容,或者上报不同的数据,这里就要对 url 、缓存的处理有相应的能力。当然了,这块页面是很注重页面白屏时间和性能的,有能力的团队会考虑SSR直出页面。

第六,移动端视频播放页面。最近短视频崛起,但是很多短视频 app 中的页面是 web 前端页面,这样做的原因是 app 过审麻烦且时间周期长,业务需要快速迭代和修复的情况下,前端责无旁贷。那么这时候考验的是你对视频的操作能力,对流式播放技术和能力的掌握。此外,视频挂件、贴纸、弹幕、互动、美颜、变老挑战等等,都是现在短视频必备的能力。

第七,微信小程序。噢,不,应该是小程序。微信、支付宝、网络等大企业,先后推出了小程序,当然身为前端开发的我们是必须掌握的一门技巧,虽然不是新的语言,但代码组织方式、调试方式、底层原理,也是值得关注和学习。

第八,造轮子写工具、写框架,搭建基础设施。公司逐渐发展壮大以后,会面临一个问题,那就是如何将前端基础设施做起来。基础设施对前端的工程搭建与发展来说,太重要了。技术的选型、代码风格的制定,代码模块的积累沉淀,项目的打包构建与部署,持续集成与持续交付,单元测试与UI自动化测试,错误日志上报与可视化,打点日志上报与可视化,成员间代码协作与代码评审等等。这些对一个业务步入正轨的公司或者团队来说,太重要了。这是前端工程的基石,业务快速迭代的奠基,必须重视起来。