加入星计划,您可以享受以下权益:

  • 创作内容快速变现
  • 行业影响力扩散
  • 作品版权保护
  • 300W+ 专业用户
  • 1.5W+ 优质创作者
  • 5000+ 长期合作伙伴
立即加入
  • 正文
  • 推荐器件
  • 相关推荐
  • 电子产业图谱
申请入驻 产业图谱

嵌入式工程师入门前后端系列1:访问一个网页

2020/11/24
173
阅读需 5 分钟
加入交流群
扫码加入
获取工程师必备礼包
参与热点资讯讨论

做为嵌入式行业的从业者,最近经常听到 PAAS,SAAS 等和”云”相关的概念,被整的一头雾水。很多时候咱们的物联网硬件设备都会有一个云平台,用于设备管理或者 UI 应用展示等功能,这通常是由专门的前后端工程师配合美工一起完成。作为一个门外汉,我计划简单学一下这方面的基础知识,以后也好和别人瞎侃,免得出现插不上话的尴尬。

先简单说说什么是前端和后端,以我们每天使用的百度为例,你在浏览器输入 www.baidu.com/,就显示了如下呈现在你眼前的界面,这就是前端。

比如你在搜索框里输入黑洞,然后点击百度一下,真的出现了一个黑洞,

是不是很炫,这就是前端干的事。前端指的是用户可见的界面,网站前端页面也就是网页的页面开发,比如网页上的特效、布局、图片、视频,音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页,并配合后端做网页的数据显示和交互等可视方面的工作内容。

当然要实现这效果,也不是单单前端自己就完成了,背后离不开后端的支持,你百度的那一下,后端是做了很多工作的。后端是指用户看不见的东西,通常是与前端工程师进行数据交互及网站数据的保存和读取,相对来说后端涉及到的逻辑代码比前端要多的多,后端考虑的是底层业务逻辑的实现,平台的稳定性与性能等。

那么前端、后端一般用什么编译语言呢?

前端开发用到的语言主要是 html、css、javascript,其他相关的还包括 jquery、Bootstrap、ReactJs,VueJs 等技术。

后端开发,用的编程语言包括 java,python,go,还有 c++,不同的语言都有自己的主流框架,比如 java 的框架有 spring boot。java 最多相关组件最完善,python 最快最轻,go 最新。大公司一般用 Java。新上手可以用 python 快速上手,门槛最低。

刚听到上面一堆名词,我也是云里雾里,不过没关系,咱们先入门,慢慢学。

我们先实现一个简单的功能,在浏览器里输入一个地址,显示一个最简单的网页,网页里的内容是 Hello World。

第一步,我们先新建一个 hello.html,在 Nodepad++或者 Vscode 里编辑Hello World!其中:  声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元(meta)数据,如定义网页编码格式为 utf-8。

元素包含了可见的页面内容 https://www.runoob.com/html/html-tutorial.html 大家可以到菜鸟教程里学习 html,里面介绍的非常详细。之后你用浏览器就可以直接打开了,HTML 称为超文本标记语言,是不需要编译的,HTML 运行在浏览器上,由浏览器来解析。

在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到背后的实现。

下一步我们实现通过浏览器输入本机的 IP 地址来访问,先把 Python 装起来,输入:python -m SimpleHTTPServer 8083 快速搭建一个 http 服务。这是 python 自带的功能。

如果提示 python 找不到,修改下环境变量,添加上 python 的安装路径即可。然后浏览器输入 IP 加端口即可访问,

把 hello.html 改为 index.html,就可以直接显示出来了,

如果你有阿里云服务器,同样的做法,就可以远程访问部署在阿里云上的网页。这样在任何一台可以上网的电脑上都可以远程访问该页面。刚开始我的阿里云一直访问不上,后来找到原因是安全规则设置的问题,登录阿里云配置一下,就可以了。

推荐器件

更多器件
器件型号 数量 器件厂商 器件描述 数据手册 ECAD模型 风险等级 参考价格 更多信息
ABM3C-25.000MHZ-D4Y-T 1 Abracon Corporation CRYSTAL 25.0000MHZ 18PF SMD

ECAD模型

下载ECAD模型
$2.57 查看
USB3320C-EZK-TR 1 SMSC Interface Circuit, 5 X 5 MM, 0.90 MM HEIGHT, ROHS COMPLIANT, QFN-32
$2.65 查看
S25FL512SAGMFIR11 1 Spansion Flash, 512MX1, PDSO16, 0.300 INCH, LEAD FREE, PLASTIC, MO-013EAA, SOIC-16
$8.54 查看

相关推荐

电子产业图谱

TopSemic,让芯片使用更简单。 专注分享:嵌入式,单片机,STM32,ARM,RTOS,Linux, 软硬件,半导体,电子技术等相关内容。