全栈开发技能2：前端基础

目标

以 HelloBD 应用为例，搭建好 SPA Web 应用的基本框架
1、Web应用程序的基本概念（JS运行环境、BOM、DOM概念）
2、学会基于 jQuery 操作 DOM 的基础前端Web开发
3、与后端API进行数据交互（Ajax、jQuery、Fetch、axios）
4、基本的 SPA 应用程序类的写法
5、引入前端样式框架

知识点：

1、Web应用程序的基本概念（JS运行环境、BOM、DOM概念）

• BOM 浏览器对象模型（我能怎样操作浏览器？）
• DOM 文档对象模型（我能怎么修改网页内容？）
• Js 运行环境（宿主：浏览器、Nodejs环境）

2、学会基于 jQuery 操作 DOM 的基础前端Web开发

• jQuery 选择器
• jQuery 数据操作
• jQuery DOM 操作（读取、缓存、填充、新增）

3、与后端API进行数据交互（Ajax、jQuery、Fetch、axios）

• 原生 Ajax 方法
• jQuery Ajax 数据操作
• Fetch 方法
• axios 库的使用

4、基本的 SPA 应用程序类的写法

• ES 6 高级语言特性 — 类的写法
• 一个基于类的前端单页应用(SPA) 的写法

5、引入前端样式框架

• Bootstrap：https://www.bootcss.com/
• WeUI：https://weui.io/ 文档：https://weui.io/docs/getting-start.html
• jQueryWeUI ： http://jqweui.com/
• 图标字体
  • Font Awesome：http://www.fontawesome.com.cn/
  • Bootstrap 图标库：https://icons.bootcss.com/
  • 阿里图标：https://www.iconfont.cn/
  • 字节跳动图标库：https://iconpark.oceanengine.com/official
• 一般图标设计
  • IconFinder：https://www.iconfinder.com/
  • EasyIcon：https://www.easyicon.cc/

练习

1、Web应用程序的基本概念（JS运行环境、BOM、DOM概念）

• BOM 浏览器对象模型（我能怎样操作浏览器？）
  • 在调试台键入 window，可以查看 window 对象
  • 键入 location 可以查看 location 对象
  • location.href = 'https://www.bilibili.com' 可以让网页跳转
  • location.reload() 可以重新加载网页（刷新）
  • history.length 页面浏览历史个数
  • history.back() 退回浏览历史上一页
  • history.forward() 前进一页
  • history.go(1) 前进一页
  • history.go(-1) 后退一页
• DOM 文档对象模型（我能怎么修改网页内容？）
  • 练习：查询 DOM 相关的文档，了解细节
  • 控制台输入代码： document.body.innerHTML = 'Hello World' 可以修改当前网页内容
• Js 运行环境（宿主：浏览器、Nodejs环境）
  • 浏览器当中的 js 程序相当于运行在安全沙盒当中，不会修改浏览器之外的东西；

2、学会基于 jQuery 操作 DOM 的基础前端Web开发

• 接上一节课创建的 HelloBD 目录，使用 VSCode 打开目录
• 使用 Microsfot Edge 浏览器，安装扩展，可以选择 JSONViewer 插件，可以在 API 是 JSON 格式的时候，自动格式化，方便浏览 JSON 结构
• 引用 jQuery, 可以从公用的 CDN 网站加载现成的 jquery.min.js
• jQuery 选择器
• jQuery DOM 操作（读取、缓存、填充、新增）