嵌入式工程师跨界学习前后端系列1:访问一个网页

       我是做嵌入式的,最近听了很多关于云平台的名词,比如PAAS,SAAS等,整的我一头雾水。于是准备学一下这方面的技术知识,不然出去又没法和人聊天了。计算机相关专业或者本身就是做前后端技术的童鞋可以忽略此文章了,我写的文章适用于前后端零基础的同学。

       先简单说说什么是前端和后端,以我们每天使用的百度为例,你在浏览器输入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++或者visual studio code

https://code.visualstudio.com/  里编辑

其中:

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

https://www.runoob.com/html/html-tutorial.html 大家可以到菜鸟教程里学习html,里面介绍的非常详细。

之后你用浏览器就可以直接打开了,HTML称为超文本标记语言,是不需要编译的,HTML 运行在浏览器上,由浏览器来解析

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

下一步我们实现通过浏览器输入本机的IP地址来访问,

那么先把Python装起来吧,https://www.python.org/downloads/release/python-2717/

python -m SimpleHTTPServer 8083

搭建一个http的服务。

 

如果提示python找不到,修改下环境变量,添加上python的安装路径即可。

 

然后浏览器输入IP加端口即可访问,

把hello.html改为index.html

如果你有阿里云的服务器,同样的做法,就可以远程访问部署在阿里云上的网页。

阿里云上午一直访问不上,后来想到可能是防火墙或者安全规则设置的问题,

登录阿里云后配置一下,就可以了

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值