图形界面程序开发

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库

校园信息管理平台 CIMP

CIMP 实现校园 学生老师账号、通知公告、校园新闻动态、学生老师论文、学生毕业设计等数据的发布和管理。

其中内置了一个工作流系统,实现毕业设计项目的申请、审批、提交、评分功能。

本次实战要求大家开发本系统的 管理员前端子系统