View
139
Download
2
Category
Preview:
Citation preview
WEB 开发培训（入门
我是谁？曾经在电脑 110 打酱油能写一点网站PureWeber 混日子网络中心打下手
杨尚斌
几个小问题• 什么是 WEB 开发？• WEB 开发能做什么？
课程简介• DAY1 —— 前端基础• DAY2 —— 后端基础• DAY3 —— WEB开发进阶
DAY1 —— 前端基础• HTML• CSS• JAVASCRIPT
HTML
HTML
• HTTP://WWW.IMOOC.COM/LEARN/9
HTML
• 让 HTML 有意义，语义化的 HTML
CSS
CSS
• HTTP://WWW.IMOOC.COM/LEARN/9• HTTP://ZH.LEARNLAYOUT.COM/• W3C SCHOOL
CSS
• 盒子模型• 定位• 浮动• 自适应
ABSOLUTERELATIVEFIXED
position
FLOAT
清除浮动HTTP://WWW.IYUNLU.COM/VIEW/CSS-XHTML/55.HTML
自适应
百分比， em 等
常见布局
小试牛刀
JAVASCRIPT
• 极有可能是统一宇宙的语言• 网页效果• 后台开发• App• 硬件
挺难的
JAVASCRIPT
• 基础语法• 浏览器端• 服务器端
DOM
事件• 监听• 绑定事件• 移除事件
因为那个 IE ，不怎么支持捕获，所以我们一般监听事件冒泡
不过也挺好的
事件代理——委托 EVENT DELEGATE
• 情景： 动态插入的东西• HTTP://JSFIDDLE.NET/YUJIANGSHUI/JU2UJMZP/1/?
UTM_SOURCE=WEBSITE&UTM_MEDIUM=EMBED&UTM_CAMPAIGN=JU2UJMZP
停止事件冒泡—— STOPPROPAGATION
• 弹窗（点击窗外的关闭弹窗
试试类库
• JQUERY
小试牛刀？
学习资料：• HTTP://WWW.IMOOC.COM/LEARN/9 • HTTP://ZH.LEARNLAYOUT.COM/• HTTP://WWW.IYUNLU.COM/VIEW/CSS-XHTML/55.HTML• HTTPS://GITHUB.COM/BAIDU-IFE/IFE/TREE/MASTER/2015_SPRING/TASK/TASK0001• HTTP://WWW.IMOOC.COM/LEARN/11• HTTPS://GITHUB.COM/BAIDU-IFE/IFE/TREE/MASTER/2015_SPRING/TASK/TASK0002• HTTPS://GITHUB.COM/PUREWEBER/PUREWEBER2015-SUMMER
大试牛刀
• HTTP://IJACK.PW/
DAY2 —— 后端入门
• NODE ( EXPRESS OR KOA)
• 即将统一宇宙的语言！
• 不过，可能挺反人类的
HELLO WORLD
EXPRESS
EXPRESS APPLICATION GENERATOR
https://github.com/nswbmw/N-blog
MVC
数据库
模板渲染引擎
• JADE• EJS• SWIG• 你自己开发的模板渲染引擎
中间件
回调函数
• HTTPS://WWW.ZHIHU.COM/QUESTION/19801131
• 多搜索，用英文
THINKJS 1.0 & 2.0
• 国内奇舞团团队开发 —— 360
学习资料：
• HTTP://EXPRESSJS.COM/• HTTPS://GITHUB.COM/NSWBMW/N-BLOG• HTTP://BLOG.FENS.ME/NODEJS-ROADMAP/• HTTPS://CNODEJS.ORG/
DAY3 —— WEB开发进阶
• 后端负责取出数据，前端负责呈现数据
MVC
数据库
关系型数据库非关系型数据库
ORM
• OBJECT RELATION MAPPING
面向对象—— 封装，聚合等软件工程原则上发展过来
关系数据库——一些数学理论上发展而来
业务层，逻辑层——面向对象的
修改之后，需要把数据保存到关系数据库里面
在数据访问层写很多很多很多很多长的差不多的“增删查改”
• 用 ORM 保存，删除，读取对象。 ORM 负责生成相应的 SQL
• 关心自己的对象就好
模板引擎
还是为了用户界面与业务数据分分离而产生用模板引擎渲染生成标准的 HTML ，然后输出
• 业务逻辑代码和用户界面的分离• 代码单元的共享• 生成 HTML 缓存
REST
• 一种软件设计风格，不是标准
• HTTP 请求方式• GET• POST• PUT• DELETE• …..
放在服务器端的所有东西都是一个资源用户要做的就是发送一些请求，然后去获得服务器端的这些资源（ RESOURCE）核心技术 AJAX
• 资源，就是网络上的一个实体，可以是文本，歌曲或者是一个服务。——总之就是一个具体的实在
• 可以用 URL 去标识他，指向他，每个资源对应一个特定的 URL ，通过特定的 URL 去获取特定的资源• 上网，就是与资源的一系列活动，通过不同的 URL ，来获取不同的资源
• 客户端想要操作服务器，就要通过某一种的手段，让服务器发生状态的转化• 用到的手段就是 HTTP协议• GET （获取资源）• POST （创建资源）• PUT （更新资源）• DELETE （删除资源
• 如果说遵循 RESTFUL 原则
• /POST/SHOW/1 WRONG• /POST/1 RIGHT
• 资源， SHOW 是一个动作，我们应该用 GET这个 HTTP 请求获取资源
只是一种软件设计风格，不要为了风格而风格（ HTTP://WWW.RUANYIFENG.COM/BLOG/2011/09/RESTFUL）
JSON
• 一种约定的，比较好解析的数据存放格式• 其实就是一个有特定格式的字符串，没各种编程语言中，基本上都有对他比较好的解析封装实现
• JAVASCRIPT 中的对象和数组，通过这两种结构就可以表示各种复杂的数据结构• 对象： {KEY: VALUE}
• 数组： [A, B, C, …]
• 通过 JAVASCRIPT 获取要提交的表单的值，然后组成一个 JSON 数据，传给后台• 后台再根据传过来的数据进行 JSON 的解析
AJAX
(ASYNCHRONOUS JAVASCRIPT AND XML)——异步的 JAVASCRIPT 与 XML
• 异步的请求• IE 5 引入• GMAIL 采用后惊艳了世界
核心： JAVASCRIPT 对象 XMLHTTPREQUEST
通过这个对象，在不重载页面的情况下改变网页的内容
别人良好的封装 -JQUERY
前后端分离
• 核心： AJAX
• 后端只提供 API• 前端负责路由等等……
综合训练
• 模仿 JACK.PW 页面• 在上面的基础上实现简单的登录注册文章发布功能• 尽可能的去实现你想做的事情，优化他！
Recommended