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

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 ; 下一个变革？ 推荐学习网站: Thanks. * * 蔡珉星 2014-03-15 厦大数据库实验室 网站开发 Web前端 如何快速搭建/开发一个网站 实验室网站的改版经历 前端介绍 前端核心的基础技术 前端技术应用解析 网站开发 背景知识： 疑惑1：网站？网页？ 网页是单独的，网站是整体的 疑惑2：动态？静态？ 静态网站：不涉及服务器语言（PHP等），直接由HTML页面组成 动态网站：通常是从数据库中数据库中读取内容然后输出 静态网页：没有用户交互 动态网页：通常有Javascript 网站开发 几个要点： 网站开发：入门容易精通难； 搭建一个普通的网站挺容易，门槛很低； 如今开发网站，通常会直接应用开源网站框架，或者在此基础上二次开发，而不是从头开发。 采用框架省事省力 从头开发一个复杂的、可靠的网站需很多人力 Web开发应用广泛，即使不是从事该方向，适当的了解也是必须的。 网站开发 开源网站框架/系统： 优点： 免费； 可快速搭建网站，样式、功能可扩展，足够应对一般需求； 种类多（博客，论坛，CMS），选择多（层出不穷）； 常见的开源网站框架 博客类：WordPress, EMLog, Z-blog 论坛类：Discuz! CMS类：DeDeCMS, PHPCMS 缺点： 框架漏洞，间接受害； 部分需求可能无法满足（功能方面） 网站开发 网站搭建流程演示： WordPress Discuz! 网站开发 网站搭建-上线流程： 本地进行网站搭建及测试； 需要一个服务器/