一.云端开发全栈技术简介
（1）全栈：概念和技术的有效集合
应用 = APP
• 云端掌握应用逻辑，存储应用数据，控制应用权限，体现应用智能
• 应用提供交互体验
思考：云端一定有Web界面吗？
思考：云端一定提供浏览器浏览吗？
绝大部分应用情况
• 云端与应用之间使用HTTP协议
• 加密需求采用HTTPS协议
• 云端需要部署Web服务器
• 应用数据采用JSON格式传输
• 接口采用RESTful风格设计
• 终端采用浏览器或APP等多种形式
（2）终端技术趋势
（3）数据交互
（4）云端全栈（Python体系）
1.HTML技术理念及发展简介
Hyper Text Markup Language 超文本传输语言
HTML是WWW(World Wide Web)的信息组织方式
HTML通过预定义的<>…</>标签形式组织不同类型的信息
• HTML本身是一段文本，由标签组成
• 浏览器负责解析HTML，并展示成Web页面内容
• HTML所使用的标签是预定义的，浏览器可解析
• HTML符合XML规范，是XML的一种实例
• HTML是组织不同类型数据的最好形式
1）HTML的框架标签
<!DOCTYPE html> <html lang=“en”> <head> … </head> <body> … </body> </html>
HTML框架实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>Python网络爬虫</li> <li>Python云端系统开发</li> <li>Python全栈能力</li> </ul> </body> </html>
2）HTML的发展
• 2014年发布HTML5，侧重移动端，成为HTML当前标准
• HTML5在浏览器上运行，不受限于操作系统
• HTML将成为计算机/网络系统界面开发的事实标准
更多资源：http://www.w3school.com.cn
• Web 1.0: HTML+CSS 基本的网页展示
• Web 2.0: Ajax+JS+XML 高效的数据表达
• Web 3.0: HTML5+CSS3 Web自适应和普适应用
Web 3.0时代真的到来了吗？
3）布局、显示风格和页面样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li><font color="red">Python网络爬虫</font></li> <li>Python云端系统开发</li> <li>Python全栈能力</li> </ul> </body> </html>
2.CSS技术理念简介
1）Cascading Style Sheets 层叠样式表
• HTML和不同CSS的组合，可以展示不同风格
• CSS和不同HTML的组合，可以展示不同风格
• CSS对HTML中某一“类”内容定义风格
• CSS可以单独存储成文件，或书写在HTML中
2）CSS的3种写法
• 行内模式：在标签的style属性中书写
• 页内模式：在HTML网页中使用独立的<style>标签书写
• 外部模式：单独在CSS文件中书写
行内模式（把该行字改成红色）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li style="color:red">Python网络爬虫</li> <li style="color:red">Python云端系统开发</li> <li>Python全栈能力</li> </ul> </body> </html>
页内模式（全部<li>标签的风格都被修改）
1.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li {color:red} </style> </head> <body> <ul> <li>Python网络爬虫</li> <li>Python云端系统开发</li> <li>Python全栈能力</li> </ul> </body> </html>
外部模式：
HTML文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="demo.css"> </head> <body> <ul> <li>Python网络爬虫</li> <li>Python云端系统开发</li> <li>Python全栈能力</li> </ul> </body> </html>
上面引入的CSS文件（demo.css）：
1. li { 2. color:red 3. }
3.JavaScript
1.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script> function displayDate() { document.getElementById("time").innerHTML=Date(); } </script> </head> <body> <p id="time">这里将显示时间</p> <ul> <li>Python网络爬虫</li> <li>Python云端系统开发</li> <li>Python全栈能力</li> </ul> <button type="button" onclick="displayDate()">显示时间</button> </body> </html>
JavaScript
JavaScript (简称JS，和Java没任何关系)
• 一种轻量级的脚本型编程语言
• 为Web增加了交互、动态效果和行为功能
• JS由浏览器执行，访问时会被下载到本地
• JS可以写在HTML文件中，也可以单独为.js文件
JavaScript库
• 脚本性使得JS更容易开放开源
• 大量的JS库可以使用
• 希望什么效果，找个第三方库来使用
• echarts.js （百度出品）http://echarts.baidu.com/
二.HTTP与Web服务器简介
（1）HTTP，Hypertext Transfer Protocol，超文本传输协议
HTTP是一个基于“请求与响应”模式的、无状态的应用层协议
HTTP协议采用URL作为定位网络资源的标识，URL格式如下：
http://host[:port][path]
host: 合法的Internet主机域名或IP地址
port: 端口号，缺省端口为80
path: 请求资源的路径
HTTP URL实例：
HTTP URL的理解：
URL是通过HTTP协议存取资源的Internet路径，一个URL对应一个数据资源
（2）HTTP协议对资源的操作
通过URL和命令管理资源，操作独立无状态，网络通道及服务器成为了黑盒子
（3）Web服务器
• Web服务器（Web Server）是软件工具
• Web服务器用于提供HTTP/HTTPS访问服务
• Web服务器很成熟，只需要配置，不需要开发
• 常用的Web服务器软件：
Web服务器 Apache、Nginx、IIS、BEA Weblogic、Tomcat、Node.js
