Transcript Web前端技术 - 厦门大学数据库实验室

蔡珉星
2014-03-15
厦大数据库实验室
网站开发
 如何快速搭建/开发一个网站
 实验室网站的改版经历
Web前端
 前端介绍
 前端核心的基础技术
 前端技术应用解析
网站开发
背景知识：
 疑惑1：网站？网页？
 网页是单独的，网站是整体的
 疑惑2：动态？静态？
 静态网站：不涉及服务器语言（PHP等），直接由HTML页面组成
 动态网站：通常是从数据库中数据库中读取内容然后输出
 静态网页：没有用户交互
 动态网页：通常有Javascript
网站开发
几个要点：
 网站开发：入门容易精通难；
 搭建一个普通的网站挺容易，门槛很低；
 如今开发网站，通常会直接应用开源网站框架，或者在此基
础上二次开发，而不是从头开发。
 采用框架省事省力
 从头开发一个复杂的、可靠的网站需很多人力
 Web开发应用广泛，即使不是从事该方向，适当的了解也是
必须的。
网站开发
开源网站框架/系统：
优点：
 免费；
 可快速搭建网站，样式、功能可扩展，足够应对一般需求；
 种类多（博客，论坛，CMS），选择多（层出不穷）；
 常见的开源网站框架
 博客类：WordPress, EMLog, Z-blog
 论坛类：Discuz!
 CMS类：DeDeCMS, PHPCMS
缺点：
 框架漏洞，间接受害；
 部分需求可能无法满足（功能方面）
网站开发
网站搭建流程演示：
WordPress & Discuz!
网站开发
网站搭建->上线流程：
 本地进行网站搭建及测试；
 需要一个服务器/空间；
 可能需要一个域名；
 上传程序到服务器。
网站开发
低质量网站泛滥：
 建站门槛低，成本低；
 CMS“逆天”的功能：采集；
 类似网络爬虫，获取内容很容易；
 利益驱使 -> 投放网络广告，流量大就能带来高收益；
网站开发
实验室网站改版经历
 挑战1：网站框架改变(Drupal到WordPress) -> 数据的迁移
 数据库的表结构不同；
 旧框架，内容所涉及的表超过10个，而新框架存放内容的表只有2个;
 页面URL、图片URL改变。
 解决：
 找对应关系
 编写程序批量读取、转换、导入数据（分多步完成，比较容易实现）
 获取新旧URL对应，替换数据
网站开发
实验室网站改版经历
 挑战2：网站样式 -> 手机端兼容
 响应式设计
 网上的模板不太满意
 功能方面的定制（相册展示）
 解决：
 响应式设计并不难实现
 框架本身的扩展性良好
 官方的模板、插件开发文档很齐全
 网上搜索解决方法
网站开发
开源Web开发框架
 网站系统侧重于直接建站，开发框架则侧重开发
 降低开发复杂度，提升开发速度
网站的一个基本功能 - 连接数据库，获取数据的原生PHP代码如下：
网站开发
开源Web开发框架
 采用开发框架(ThinkPHP)，相同功能的代码如下：
 进一步示例：
网站开发
开源Web开发框架
 以MVC架构理解Web开发中的前后端之分：后端产生数据，
前端展示数据
Model & Control
View
网站开发
小结：
 建站门槛低，有大量的开源网站系统可以直接使用 ;
 开发网站很复杂（用网站系统很容易，开发一个就很困难） ;
 自行开发网站时，可以使用Web开发框架，提升效率与质量 ;
 用MVC架构的角度理解Web开发的前后端之分 .
Web前端技术
Web前端技术
Web前端
 网站的重要组成部分，用户直观感受的地方
 涉及东西很繁琐，入门容易精通难
Web前端技术
背景知识之：一个网页的显示过程
1.
2.
3.
4.
输入网址，浏览器向服务器发起请求
服务器接收请求，返回数据（一段HTML代码）
浏览器接收HTML代码的同时进行渲染
页面加载、显示完毕
浏览器的渲染
1. 边接收代码边进行渲染；
2. 服务器只是返回HTML代码，浏览器渲染时会根据代码
再向服务器发起请求（图片等资源）；
3. 很重要的一点：不同浏览器的渲染机制/标准不同，从
而导致了不同浏览器下，同一页面的显示可能不同。
Web前端技术
前端魅力之CSS (层叠样式表)
 页面代码跟样式代码分离；
 无需更改HTML代码，只需更改CSS文件就可以更改样式。
Web前端技术
前端魅力之CSS (层叠样式表)
 同一个页面，引入不同CSS，样式也就大不相同（换肤功能）
 极致 – CSS Zen Garden (www.csszengarden.com)
Web前端技术
前端魅力之：响应式设计
 面临多种屏幕尺寸的兼容挑战，挑战已延伸到手机端；
 一般方案：判断用户是否使用手机访问，是则输出针对手机的
HTML页面。
 响应式设计方案：同一HTML，同一CSS，不同终端自适应。
 得益于CSS3的功能： @media
Web前端技术
背景知识：HTML5+CSS3
 新一代Web标准 ;
 HTML5新增了一些标签与功能，便于开发Web APP ;
 目前智能手机端的浏览器一般采用Webkit内核，支持
HTML5+CSS3，基于HTML5标准编写的页面兼容性良好。
 CSS3也新增了一些功能，原本需要借助图片、Flash、
JavaScript才能实现的效果，如今应用CSS3，几行代码就能实
现（如文字阴影效果）
Web前端技术
前端魅力之：响应式设计
 通过CSS3的 @media ，可以根据屏幕大小自动匹配样式
Web前端技术
前端核心语言：JavaScript
 跟Java没有关系 （雷锋跟雷峰塔…）;
 最早诞生是为了验证用户输入表单数据的正确性；
 解释性语言（即代码执行时不进行预编译）;
 只要浏览器带有解析器（都有带），便可在浏览器上运行
JavaScript程序。
Web前端技术
背景知识：DOM
 文档对象模型（Document Object Model，DOM）
 DOM将HTML页面映射成节点树
Web前端技术
JavaScript特征
 基于DOM，JavaScript可以很方便的操作节点（添加、删除
、修改）
Web前端技术
JavaScript特征
 事件机制
 回调
Web前端技术
你是否注意到这个： Google Suggest
如何实现
???
Web前端技术
Web 2.0 核心技术：Ajax
 Asynchronous JavaScript and XML，异步JavaScript和XML ;
 引领网站架构变革的核心技术 ;
 并不是一个全新的语言，而是由多种已有技术组成。
 描述数据：HTML
 展示数据：JavaScript DOM操作、CSS
 请求数据：XMLHttpRequest object(XHR) 、XML 、JSON
 应用广泛，Web前端必备技能
Web前端技术
背景知识之：Web中的同步与异步
同步
发起请求成功后
浏览器会清空当前内容
再重定向到一个新的页面
异步
在当前页面返回数据
浏览器不会重定向
Web前端技术
Ajax简单的例子
Web前端技术
Ajax简单的例子
点击按钮后
Web前端技术
Ajax优势
 容易实现
 无需跳转到新页面即可显示新数据（无刷新，显示速度快）
 减少数据的传输，减轻服务器压力
 创意应用
Ajax应用场景
 注册（判断用户名是否可用）
 登陆
 加载新内容（翻页）…
Web前端技术
Ajax应用解析 – 瀑布流式布局
 起源于Pinterest，参差不齐的布局，会不断加载内容
 特别适合于图片展示
 应用广，图片类应用基本都会采用
Web前端技术
瀑布流演示
Web前端技术
Ajax应用解析 – 瀑布流式布局
Web前端技术
Ajax应用解析 – 瀑布流式布局
Web前端技术
现在你就大致清楚Google Suggest等绝大多数
Ajax应用的实现原理了
Web前端技术
Ajax应用数据传输 – JSON
 JSON(JavaScript Object Notation，JavaScript对象表示法)
 轻量级的数据交换格式，比XML更小、更快
 Web前后端均支持良好
Web前端技术
Ajax应用数据传输 – JSON
 JSON的格式 - 类数组
 JavaScript原生支持
 多数编程语言也有相
应的函数进行处理
json_encode()
json_decode()
Web前端技术
Ajax应用数据传输 – JSON
QQ空间数据请求示例
Web前端技术
JSON的更多应用 -> 数据库
应用场景 -> 存储属性，以商品属性为例
 商品属性多，如果要存到数据库里，如何存储？
方案一：
方案二：key-value
方案三：JSON
Web前端技术
JavaScript不只是前端！
 解释性语言，有解析器就能运行，那如果我们把解析器从
浏览器中提取出来，来运行Javascript程序会是怎样？
node.js
Web前端技术
node.js
 专注高性能Web应用，简单的代码就能构建强大的应用 ;
 前端、后台均使用JavaScript语言来开发 。
Web前端技术
关于前端的其他事：
 前端也有开发框架( jQuery)
 前端开发资源很多(模板、样式、脚本)，套用很容易
 套用一些酷炫的效果很容易，开发就不是一回事了
 前端代码是完全暴露的，copy难度很小
 小公司一般不会有专门的前端开发，前端人员往往身兼数职
Web前端技术
小结：
 前端涉及方面广，入门容易精通难 ;
 创意很重要 ;
 Ajax是核心技术，且不难掌握 ;
 Web前端资源丰富，但代码难保护
 前端技术不仅是前端
 HTML5+CSS3 对界面设计的影响 ;
 node.js 使JavaScript走向Web后端开发 ;
 Google推出取代JavaScript的语言Dart ;
 下一个变革？
 推荐学习网站: www.w3school.com.cn
Thanks.