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