图形界面程序开发
HTML CSS
| 知识点 | 概述 |
|---|
| 简介 | web应用技术，web前端、后端开发简介 |
| 开发工具准备 | vscode安装使用简介 |
| HTML简介 | html 元素、head 元素、body 元素、空元素 |
| HTML简介 | 元素的属性、注释 |
| HTML简介 | 把HTML放到网站里、Live Server扩展、Nginx |
| URL | 传输协议 scheme，域名和端口，资源路径，URL 参数，锚点 |
| 常用 HTML元素 | 标题 h1-h6，段落 p，一块内容 span，换行 br |
| 常用 HTML元素 | 专题切换 hr，超链接 a，强调 strong b em mark |
| 常用 HTML元素 | 图片 img，预格式化 pre |
| CSS语句的位置 | 内联CSS，head 里的 CSS，外部CSS文件 |
| CSS简介 | CSS 注释，div 元素，浏览器查看修改 HTML/CSS |
| CSS 优先规则 | 声明次序，具体性，继承性，!important |
| CSS 选择器 | 根据 标签名，根据 id 属性，根据 class 属性 |
| CSS 选择器 | 选择 子元素 和 后代元素 |
| CSS 选择器 | 根据属性选择，验证 CSS Selector，选择语法联合使用，组选择 |
| CSS 选择器 | 父元素的第n个子节点，父元素的倒数第n个子节点 |
| CSS 选择器 | 父元素的第几个某类型的子节点，父元素的倒数第几个某类型的子节点 |
| CSS 选择器 | 奇数节点和偶数节点 |
| CSS 选择器 | 相邻兄弟节点选择，后续所有兄弟节点选择，所有元素 |
| CSS 选择器 | 相邻兄弟节点选择，后续所有兄弟节点选择，所有元素 |
| CSS 颜色 | 关键字值，Hex RGB值，rgb函数 |
| CSS 长度单位 | px，rem，em，vw、vh |
| 字体 | 类别，粗细/倾斜/装饰线 |
| 边框 | 边框线宽，边框样式，边框颜色, 边框边角弧度 |
| 文字布局 | 对齐，行高，字词间距，white-space |
| table 元素 | 指定宽度，居中，单元格合并 |
| 列表 | ol，ul，list-style-type |
| block 和 inline | block 模式，inline 模式，inline-block |
| 基本布局规则 | Content区，Padding 区，Border 区，Margin 区，包含块 |
| 基本布局规则 | 宽度和高度，内间距 padding，外间距 margin |
| 基本布局规则 | 调试css，百分比，auto |
| 基本布局规则 | 最大/最小 宽度高度，背景色范围 |
| FlexBox布局 | 基本概念，自动换行 |
| FlexBox布局 | flex-basis，flex-grow，flex-shrink |
| FlexBox布局 | 从轴对齐，主轴对齐 |
| FlexBox布局 | 基本概念，自动换行 |
| Grid布局 | 基本概念，列布局，行布局 |
| Grid布局 | 元素跨行跨列，网格线 |
| float | float 的作用，多个元素float |
| position | 相对定位 relative，绝对定位 absolute，固定定位 fixed |
| HTML 特定语义元素 | nav/main/foot |
| HTML 特定语义元素 | header/aside/section/article |
| 用户交互元素 | input 概述，表单 form |
| 用户交互元素 | input - text、email、password、number |
| 用户交互元素 | 标签 label，多行文本框 textarea，按钮 button |
| 用户交互元素 | 单选 input - radio，复选 input - checkbox |
| 用户交互元素 | 选择框 select |
Javascript 语言
| 知识点 | 概述 |
|---|
| Javascript 简介 | 简介，代码编辑软件vscode |
| Javascript 简介 | 获取/修改 网页的内容 |
| Javascript 简介 | 当某个事件发生时得到通知 |
| Javascript 简介 | 和服务端进行通讯 |
| Javascript 简介 | js执行引擎，浏览器，DevTools Console |
| Javascript 简介 | HTML内嵌js代码，HTML引用外部js代码文件 |
| 数字运算 | 整数，小数，存储特性 |
| 数字运算 | 加减乘除、次方，混合运算，表达式 |
| 变量 | 变量的概念，变量的命名规则 |
| 变量 | 变量名 对应新的数据，变量数据 本身发生了变化 |
| 变量 | 数字变量值变化 |
| 注释 | 单行注释，多行注释 |
| 字符串 | 字符串的定义，字符串中有引号，字符串拼接 |
| 字符串 | 字符串元素索引，获取字符串长度 |
| 初学函数 | 函数的作用，定义函数 |
| 初学函数 | 调用函数，调用后返回 |
| 初学函数 | 函数的参数，函数的返回值，参数缺省值 |
| 变量的有效范围 | 全局范围，函数内部，代码块 |
| 变量的有效范围 | var vs let，范围覆盖 |
| 一些内置函数 | 输入框 - prompt 函数，提示框 - alert 函数，确认框 - confirm 函数 |
| 一些内置函数 | parseInt、parseFloat |
| 判断语句 | 布尔类型，布尔表达式 |
| 判断语句 | 逻辑且，逻辑或，逻辑非 |
| 判断语句 | if, else, else if |
| 判断语句 | 条件判断嵌套，条件赋值 |
| 对象 | 对象和属性 |
| 对象 | 使用字面标记创建对象，属性名为变量 |
| 对象 | 添加属性，修改属性，删除属性 |
| 对象 | 函数作为对象属性 |
| 对象 | 使用构造函数创建对象 |
| 对象 | 原型 和 原型链 |
| 对象 | 内置构造函数 Object |
| 对象 | 使用原型创建对象 |
| 对象 | Object.prototype |
| 对象 | 原型的好处 |
| 对象 | 构造函数 定义， 构造函数原型链 |
| 对象 | 检查对象是否有某个属性 |
| 对象 | 得到对象所有属性，得到对象所有属性和值 |
| 数组 | 数组的概念，索引，切片 slice |
| 数组 | 末尾添加 push，末尾取出元素 pop |
| 数组 | 开头取出元素 shift，改变单个元素 |
| 数组 | 指定位置删除 splice，指定位置替换 splice，指定位置插入 splice |
| 数组 | 数组元素倒过来 reverse，获取元素索引 indexOf |
| 数组 | 检查是否包含 includes，清空数组 |
| 数组 | 拼接字符串 join，多个变量同时赋值 |
| 数组 | 函数返回数组，const 定义变量 |
| 数组 | map方法， indexof方法 |
| 字符串、数字对象 | primitive 数据的概念 |
| 字符串对象 | length，indexOf |
| 字符串对象 | 切片 slice，split |
| 字符串对象 | trim、trimStart、trimEnd |
| 字符串对象 | 替换，startsWith 和 endsWith |
| 字符串对象 | 字符串模板，转义符 |
| 字符串对象 | includes，padStart，padEnd |
| 数字对象 | parseInt、parseFloat，toString |
| while 循环 | while 循环，do while循环 |
| for 循环 | 循环 n 次，遍历数组，遍历对象 |
| 循环 | break 终止循环，continue中止本轮循环 |
| 循环 | 函数中的 break 和 return |
| 循环 | 循环嵌套，冒泡排序 |
| 调试程序 | 为什么要调试 |
| 调试程序的方法 | DevTools 断点调试，打印出关键变量的值，使用哪种方法？ |
| 类和继承 | 类的定义和实例化 |
| 类和继承 | 子类继承父类，和父类的不同 |
| 错误捕获 | 错误对象，抛出错误 |
| 错误捕获 | 捕获错误，嵌套捕获 |
| 错误捕获 | 函数调用里面产生的错误，函数调用栈抛出的错误，finally |
| 3个点操作符 | 剩余参数，展开语法 |
| 回调 | 为何需要回调，异步架构 |
| 回调 | 匿名函数，箭头函数 |
| 回调函数中的this | 保存this到其它变量，箭头函数中的this，函数原型方法bind |
| promise | 回调地狱的问题 |
| promise | 创建 Promise |
| Promise的then方法 | 参数 - 处理函数 |
| Promise的then方法 | 返回值 - Promise |
| promise | Promise 链 |
| promise | 错误处理 |
| async await | async await 语法糖的用法 |
| 模块化 | HTML中导入所有js的问题，模块化 |
| 模块化 | 命名 导出/导入，导出声明列表 |
| 模块化 | 默认 导出/导入 |
| 模块化 | 命名空间导入 |
js Web应用
| 知识点 | 概述 |
|---|
| Web API 简介 | 浏览器内置window对象 |
| Web API 简介 | DOM 文档对象模型 |
| Web API 示例 | 获取元素对象，事件和处理 |
| Web API 示例 | 获取网页内容，改变网页内容，其它能力 |
| DOM对象通用属性 | 继承关系 |
| EventTarget 通用属性 | addEventListener()，removeEventListener() |
| Node 通用属性 | 获取所有子节点，textContent，获取父元素节点 |
| 内置对象document | 产生元素对象，寻找内部元素 |
| Element 通用属性 | id，children |
| Element 通用属性 | innerHTML、outerHTML |
| Element 通用属性 | 获取内部元素，获取上级元素 |
| Element 通用属性 | 添加元素，删除元素，替换元素 |
| Element 通用属性 | 获取元素属性，设置元素属性，删除元素属性,class属性 |
| Element 通用属性 | 获取内部元素，获取上级元素 |
| HtmlElement 通用属性 | innerText、outerText, style |
| HtmlElement 通用属性 | focus(), click() |
| 元素对象自身属性 | a元素对象，button元素对象，img元素对象 |
| 元素对象自身属性 | input 通用属性 |
| 元素对象自身属性 | input - text，email，password，number |
| 元素对象自身属性 | input - number |
| 元素对象自身属性 | input - radio，checkbox |
| 元素对象自身属性 | textarea |
| 元素对象自身属性 | select 和 option |
| 事件处理定义方式 | addEventListener，DOM对象事件属性，html 内联定义 |
| 事件处理 | 事件针对的元素，代码在html的位置， |
| 事件处理 | 页面加载后才执行，事件对象和类型 |
| 事件处理 | 事件处理顺序，事件对象 target属性 / this |
| 事件处理 | 动态创建元素的事件，preventDefault() |
| jQuery | 简介,安装 |
| jQuery | 选择元素/事件处理 |
| jQuery | 添加元素，删除元素 |
| jQuery | 替换元素内容，元素值操作 |
| jQuery | 获取元素属性，设置元素属性 |
| jQuery | 删除元素属性，style设置 |
| 和服务端通讯 | HTTP 协议 |
| 和服务端通讯 | XHR/AJAX |
| 和服务端通讯 | 前后端API 接口 |
| jQuery 构建请求消息 | 请求方法，url 和 url参数，消息头，消息体 |
| jQuery 解析响应消息 | 消息头, 消息体解析 |
| 和服务端通讯 | session 机制 |
| fetch API 构建请求消息 | url 和 method, url 参数 |
| fetch API 构建请求消息 | 消息头, 消息体 |
| fetch API 解析响应消息 | 响应状态码, 消息头, 消息体 |
| fetch API 解析响应消息 | 结合 async/await |
React
| 知识点 | 概述 |
|---|
| React 简介 | 简介，为何要用框架 |
| React 简介 | react简易开发环境搭建 |
| React JSX | JSX简介，元素属性表达式 |
| React JSX | 空元素，可以用括号，必须有顶层元素 |
| React JSX | 更新渲染内容，只更新变化的部分，独立 jsx 文件 |
| 组件简介 | 函数组件，类组件 |
| 组件简介 | 组件 参数，组件 组合，组件 包含 |
| 组件的状态和生命周期 | 组件的状态，组件的生命周期 |
| 挂载阶段 | constructor()，render()，componentDidMount() |
| 更新阶段 | render()，shouldComponentUpdate()，componentDidUpdate() |
| 卸载阶段 | componentWillUnmount() |
| 补充学习 | forceUpdate() |
| 事件处理 | React的事件处理，组件类方法中的this |
| 对象数组 | 常用场景，元素的 key属性 |
| 输入元素 | input输入，textarea，select |
| 调试工具 | 浏览器扩展 React Developer Tools |
| 父子组件 | 分离出子组件 |
| 父组件触发子组件更新 | 参数是间接渲染数据的问题 |
| 父组件触发子组件更新 | 使用componentDidUpdate |
| 父组件触发子组件更新 | 参数传递直接渲染数据 |
| 子组件触发父组件更新 | 父组件给子组件传递回调函数 |
| JSX转化为js | 简介 |
| node.js | 下载安装，交互式代码输入，运行js代码文件 |
| npm | 国内的源，package.json，安装库，卸载库 |
| Babel 转化JSX | 安装Babel，配置文件，转化命令 |
| 使用 React ES6模块库 | 何时使用 ES6模块库，使用注意 |
| Webpack | 为什么需要构建工具 |
| Webpack | webpack 简介，安装webpack、安装Babel |
| Webpack开发环境 | 安装 webpack-dev-server，配置文件，启动 |
| React Router | 安装 React Router，Router 方式 |
| React Router | 使用 HashRouter |
项目实战
药管系统 HYMS
开发药品销管系统的 网站前端子系统
具体内容点击这里查看
| 练习 | 概述 |
|---|
| 项目实战1 | 登录界面 |
| 项目实战2 | 登录接口 |
| 项目实战3 | 主界面布局 |
| 项目实战4 | 主界面菜单样式 |
| 项目实战5 | 点击隐藏显示子菜单 |
| 项目实战6 | 列出系统中的客户 |
| 项目实战7 | 添加客户 |
| 项目实战8 | 分页功能 |
| 项目实战9 | 删除客户 |
| 项目实战10 | 修改客户 |
| 项目实战11 | 各个功能界面路由 |
| 项目实战12 | 药品管理功能 |
| 项目实战13 | 改为React实现 |
| 项目实战14 | 订单功能 - 选择客户 |
| 项目实战15 | 订单功能 - 选择药品、提交订单 |
| 项目实战16 | 个人信息管理 |
| 项目实战17 | 模块化 |
| 项目实战18 | 使用webpack构建项目-包括开发环境、生产环境 |
| 项目实战19 | 统计数据图表 |
| 项目实战20 | 使用React Router库 |
Elife 设备控制管理系统
Elife 实现生活设备（洗车机、充电站、存储柜等）的管理控制平台。
包括：设备型号管理、业务规则管理、设备管理、客户查看、消费记录、统计功能、权限分组管理等等。
本次实战要求大家开发该系统的 管理端 SMP 前端子系统