图形界面程序开发

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 前端子系统