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 页面• 在上面的基础上实现简单的登录注册文章发布功能• 尽可能的去实现你想做的事情，优化他！