课程试听
正在播放

阶段一 金融行业-微金所响应式开发项目

展开
第一章 微金所响应式开发项目
1-1 微金所头部布局
  • 移动web-wjs页面的整体结构
  • 移动web-微金所页面的字体图标样式准备
  • 移动web-微金所头部块制作(上)
  • 移动web-微金所头部块制作(中)
  • 移动web-微金所头部块制作(下)
1-2 微金所导航布局
  • 移动web-导航条组件的说明
  • 移动web-导航条组件的样式修改(上)
  • 移动web-导航条组件的样式修改(下)
1-3 微金所轮播图效果
  • 移动web-轮播图的效果分析
  • 移动web-轮播图插件的使用说明
  • 移动web-移动端的轮播图效果实现
  • 移动web-非移动端的轮播图效果实现
  • 移动web-使用响应式工具实现轮播图
  • 移动web-使用js实现轮播图
  • 移动web-实现轮播图的滑动操作
  • 移动web-微金所首页轮播图的完成
1-4 微金所标中部布局
  • 移动web-微金所信息块制作
  • 移动web-微金所预约块制作
  • 移动web-标签页的使用
  • 移动web-标签页导航样式修改(上)
  • 移动web-标签页导航样式修改(下)
  • 移动web-详细产品块结构
  • 移动web-详细产品块样式(上)
  • 移动web-详细产品块样式(中)
  • 移动web-详细产品块样式-宝北的添加
  • 移动web-产品active块的制作
  • 移动web-产品块标签页导航条的宽度计算
  • 移动web-产品块标签页导航条的滑动
1-5 微金所底部布局和效果
  • 移动web-新闻块结构分析
  • 移动web-新闻块结构样式(上)
  • 移动web-新闻块结构样式(中)
  • 移动web-新闻块结构样式(下)
  • 移动web-合作伙伴块制作
  • 移动web-bootstrap定制的简单说明
1-6 rem介绍和应用
  • 移动web-em和rem的介绍
  • 移动web-rem实现适配的简单说明
  • 移动web-rem案例-优惠活动(上)
  • 移动web-rem案例-优惠活动(中)
  • 移动web-rem案例-优惠活动(下)

阶段二 电商行业-移动端京东电商项目

展开
第一章 移动web京东项目
1-1 首页布局
  • 移动web-京东首页公共样式
  • 移动web-京东首页整体结构
  • 移动web-京东首页顶部结构块的制作方式
  • 移动web-京东首页顶部结构块制作
  • 移动web-京东首页轮播图结构块制作
  • 移动web-京东首页导航块制作
  • 移动web-产品块制作(图片区域上)
  • 移动web-产品块制作(图片区域下)
  • 移动web-产品块制作(秒杀标题栏)
  • 移动web-产品块制作(秒杀块内容)
1-2 首页动态效果
  • 移动web-京东首页搜索块js效果
  • 移动web-京东首页倒计时js效果
  • 移动web-京东首页-轮播图(拖动修改页面结构和样式)
  • 移动web-京东首页-轮播图(js添加首尾图片)
  • 移动web-京东首页-轮播图(js设置样式)
  • 移动web-京东首页-轮播图(js实现自动轮播)
  • 移动web-京东首页轮播图自动轮播完善
1-3 移动端的touch事件
  • 移动web-移动端的touch事件简介
  • 移动web-移动端的touch事件(手指对象数组)
  • 移动web-移动端的touch事件(手指对象的坐标获取)
  • 移动web-使用touch事件实现元素的拖拽
  • 移动web-touch事件源参数中的target
1-4 轮播图效果实现
  • 移动web-轮播图-实现滑动操作
  • 移动web-轮播图-实现滑动操作(细节)
  • 移动web-轮播图-松开手指之后的处理
  • 移动web-轮播图-添加过渡结束的监听
  • 移动web-轮播图中一个bug的解决
  • 移动web-轮播图点标记的设置
1-5 zepto.js
  • 移动web-zepto的基本特点和下载
  • 移动web-使用zepto实现轮播图(上)
  • 移动web-使用zepto实现轮播图(中)
  • 移动web-使用zepto实现轮播图(下)
  • 移动web-zepto的定制
1-6 分类页面布局和滑动
  • 移动web-分类页面结构的简单说明
  • 移动web-分类页面的全屏结构创建
  • 移动web-分类页面顶部搜索块的制作
  • 移动web-分类页面左侧导航块的制作
  • 移动web-分类页面右侧商品块的制作
  • 移动web-初步实现左侧栏的滑动
  • 移动web-设置滑动区间
  • 移动web-松开手指之后的处理
  • 移动web-cilck等操作在移动端的延迟
1-7 移动端tap事件
  • 移动web-移动端的tap事件
  • 移动web-移动端tap事件的封装
  • 移动web-分类页面tap事件的添加(上)
  • 移动web-分类页面tap事件的添加(下)
  • 移动web-使用zepto来实现左侧单击操作
  • 移动web-移动端touch事件所产生的点透问题
1-8 移动端插件的使用
  • 移动web-fastclick的使用
  • 移动web-使用fastclick实现分类页面左侧栏的点击操作
  • 移动web-iscroll的使用说明(上)
  • 移动web-iscroll的使用说明(下)
  • 移动web-swiper插件的使用
  • 移动web-swiper插件的使用介绍
  • 移动web-使用iscroll插件完成分类页面右侧内容块的滑动操作

阶段三 影视行业-豆瓣电影项目

展开
第一章 豆瓣电影项目
1-1 豆瓣电影项目说明
  • 1豆瓣电影_项目说明
  • 2豆瓣电影_corstoggle展示&准备代码说明
1-2 豆瓣电影城市选择功能
  • 3确认城市选择插件
  • 4引入修改后的插件
  • 5城市选择功能完成
1-3 豆瓣电影正在热映渲染和加载更多功能
  • 6渲染正在热映
  • 7加载更多功能
1-4 豆瓣电影星级评分功能
  • 8星级评分功能
1-5 豆瓣电影影评效果实现
  • 9影评选项卡第一种做法
  • 10影评选项卡第二种做法
  • 11影评中的tab切换
  • 12影评渲染完毕
1-6 豆瓣电影分页功能
  • 13分页功能分析
  • 14分页效果实现
  • 15分页效果bug修复
1-7 豆瓣电影项目总结
  • 16项目总结

阶段四 电商行业-H5购物网站项目

展开
第一章 H5购物网站项目
1-1 fullpage插件介绍和使用
  • 案例介绍
  • fullpage简介
  • fullpage使用
1-2 第一屏布局和动画
  • 添加8屏背景
  • 添加小圆点
  • 第一屏幕布局
  • 第一屏动画制作
1-3 第二屏布局和动画
  • 第二屏幕动画制作-回调函数1
  • 第二屏幕搜索制作2
  • 第二屏幕搜索制作3
  • 第二屏幕搜索动画制作
  • 第二屏幕沙发动画制作
  • 第二屏幕图片切换动画
1-4 第三屏布局和动画
  • 第三屏幕动画布局
  • 二三屏幕沙发布局(重要)
  • 沙发动画1
  • 沙发移动距离的计算
  • 第二屏结束后再执行沙发动画
  • 第三屏幕动画制作完成
  • 倾斜沙发制作
1-5 第四屏布局和动画
  • 第四屏幕云彩动画
  • 购物车布局
  • 购物车动画制作
  • 作业安排
  • jquery easing使用
  • 第4屏幕node布局
  • 第4屏动画完成
1-6 第五屏布局和动画
  • 第5屏布局
  • 第5屏动画制作
  • 复习视距和translateZ
  • 添加文字旋转
1-7 第六屏布局和动画
  • 第6屏布局
  • 第6屏幕动画(一)
  • bug问题解决
  • 第6屏小车动画
  • 第6屏幕boy制作
  • 第6屏幕girl制作
  • 第6屏幕完成
1-8 第七、八屏布局和动画
  • 第7屏幕制作
  • 第8屏幕布局
  • 第8屏手跟随鼠标动画(一)
  • 第8屏手跟随鼠标动画(二)
  • 第8屏手再来一次制作
  • bug解决2
  • 继续往下制作案例结束

阶段五 在线服务行业-黑马博客项目(Express+MySQL)

展开
第一章 node博客项目【v2.0】
1-1 博客项目-登录与注册
  • 7.介绍项目的主要功能
  • 8.初始化黑马博客项目的基本结构
  • 9.将node_modules托管为静态资源目录
  • 10.使用bootstrap美化页面首页结构
  • 11.渲染注册和登录页面
  • 12.创建用户表并模拟注册的过程
  • 13.绘制注册用户的流程图
  • 14.根据注册的流程图完成注册的业务逻辑
  • 15.绘制登录时候的业务处理流程图
  • 1.实现登录的业务逻辑
  • 2.抽离路由模块
  • 3.通过循环的形式注册router目录下所有的路由模块
  • 4.封装controller业务处理模块
  • 5.画图介绍MVC三层架构的分层分层开发思想
  • 6.总结MVC三层之间的调用关系
  • 7.介绍Cookie的基本使用
  • 8.介绍如何通过cookie的expires属性设置过期时间
  • 9.Session的原理
  • 10.在项目中安装和配置express-session中间件
  • 11.实现注销功能
  • 12.渲染文章添加页面
  • 13.抽离公共的模板部分
1-2 博客项目-文章发表
  • 02.渲染发表文章页面的基本结构
  • 01拦截文章添加页面的非登录请求
  • 03.实现发表文章功能
  • 04.渲染基本的文章详情页
  • 05.转换markdown文本为html并渲染文章详情页的数据
  • 06.控制编辑按钮的权限
  • 07.完成编辑文章的功能
  • 08.渲染首页完整的文章列表
  • 09.渲染分页的页码条和激活的页码
  • 10.实现真正的分页和分页页码条的控制
  • 11.使用bcrypt加密算法对用户密码进行加密存储
  • 12.演示如何把黑马博客发布到服务器上去运行

阶段六 电商行业-移动端黑马商城项目

展开
第一章 vue商城项目
1-1 移动端UI框架
  • scoped属性选择器的实现原理
  • Mint-UI中按钮组件的使用
  • Mint-UI中Toast组件的使用
  • Mint-UI的按需导入组件
  • 介绍MUI
  • MUI的使用
1-2 首页布局和动画效果
  • 项目-vue项目演示
  • 项目-整理出一个基本的项目模板
  • 项目-制作项目首页的Header和Tabbar区域
  • 项目-把本地项目托管到码云中
  • 项目-使用vs code默认集成的Git工具快速提交代码
  • 项目-完成tabbar的小图标设置
  • 项目-完成tabbar路由链接的改造和路由高亮
  • 项目-实现tabbar路由组件的切换功能
  • 项目-完成首页轮播图样式布局
  • 项目-完成首页中轮播图数据的加载
  • 项目-完成首页中九宫格改造工程
  • 项目-完成组件切换时候的动画效果
  • 项目-将一天的代码上传到Git服务器
1-3 Promise
  • Promise-关于Promise要解决回调地狱问题的说明
  • Promise-基本概念的介绍【重要】
  • Promise-形式上的和具体的Promise异步操作的区别
  • Promise-Promise实例只要被创建就会立即执行里面的异步方法
  • Promise-通过.then指定成功和失败的回调
  • Promise-分析Promise的执行步骤
  • Promise-打开Promise的正确使用方式
  • Promise-捕获异常的两种方式
  • Promise-Jquery中Ajax使用Promise指定成功回调函数
1-4 新闻资讯列表页布局和效果
  • 项目-改造新闻资讯的路由链接
  • 项目-绘制新闻资讯列表页面布局
  • 项目-获取新闻资讯列表并渲染页面
  • 项目-完成新闻列表中时间格式化
  • 项目-改造新闻列表跳转到新闻详情的路由
  • 项目-获取并渲染新闻详情数据
1-5 评论功能
  • 项目-绘制评论子组件的样式
  • 项目-加载首页评论内容
  • 项目-完成评论数据的点击加载更多功能
  • 每日打卡
  • 项目-完成发表评论的功能
  • 项目-改造图片分析按钮为路由的链接并显示对应的组件页面
1-6 图片列表和详情页效果
  • 项目-图片列表顶部导航条制作1
  • 项目-图片列表顶部导航条制作2-解决初始化问题
  • 项目-解决tabbar无法正常切换组件的问题
  • 项目-渲染分类列表的数据
  • 项目-获取对应分类的图片列表数据并渲染页面
  • 项目-美化图片列表并实现懒加载效果
  • 项目-实现图片详情的数据加载和界面美化
  • 项目-完成图片详情中缩略图的制作
1-7 商品列表和商品详情页布局和效果
  • 项目-改造商品列表路由
  • 项目-实现商品列表的经典两列布局
  • 项目-在安卓手机中调试网站
  • 项目-加载商品列表中的数据并实现加载更多
  • 项目-vue-router中编程式导航的介绍
  • 项目-绘制商品详情页面的卡片视图
  • 项目-获取商品详情的轮播图数据并分析如何抽离轮播组件
  • 项目-抽离轮播图组件
  • 项目-解决轮播图宽度问题
  • 项目-绘制商品购买区域的样式
  • 项目-渲染商品详情页面的数据
  • 项目-使用编程式导航实现图文介绍和商品评论跳转
  • 项目-实现商品详情中的图文介绍和评论页面渲染
1-8 购物车小球动画效果
  • 项目-实现基本的加入购物车小球动画
  • 项目-完美实现小球动画适配不同滚动条位置和分辨率
  • 项目-每当numbox的值改变立即把购买数量传递给父组件
  • 项目-使用JS的API设置numbox的最大值
1-9 vuex
  • 项目-为什么要使用vuex
  • 项目-vuex的基本概念
  • 项目-将store中的数据显示到组件中
  • 项目-使用mutations来操作state中的数据
  • 项目-在提交mutaions方法的时候提交参数
  • 项目-使用getters包装数据并总结vuex的使用方式
1-10 实现购物车效果
  • vue项目-启用vuex并设计购物车数据存储方式
  • vue项目-实现点击加入购物车功能
  • vue项目-实现徽标数值的自动更新
  • vue项目-实现购物车商品的本地持久存储
  • vue项目-绘制购物车页面中商品列表的布局
  • vue项目-获取购物车中所有商品列表并加载显示
  • vue项目-在循环购物车列表时候初始化数量值
  • vue项目-实现购物车商品数量改变同步到store中
  • vue项目-实现购物车中商品的删除
  • vue项目-绘制结算区域样式
  • vue项目-把store中选中的状态同步到页面上
  • vue项目-同步商品的勾选状态到store中保存
  • vue项目-实现勾选数量和总价的自动计算
  • vue项目-实现返回按钮的功能
1-11 项目外网测试
  • vue项目-将项目托管到Apache并启用Gzip压缩
  • vue项目-使用ngrok把本机的网站端口映射到外网
1-12 axios知识拓展
  • axios文档介绍
  • axios常用api讲解
  • vue中使用axios

阶段七 影视行业-ReactNative电影项目

展开
第一章 ReactNative电影项目
1-1 项目展示和配置
  • ReactNative项目的演示
  • ReactNative学习的步骤
  • ReactNative开发准备工作-配置自己的手机
  • 初始化RN项目并解读提示面板的信息
  • 使用react-native start重启packager服务器
  • 修改RN项目的主页面
  • 介绍App.js组件中代码的作用
  • TextInput文本框的基本使用
  • 使用Image引入图片资源的两种方式
  • Button组件和ActivityIndicator的基本使用
  • ScrollView组件实现页面滚动
1-2 Tab栏效果
  • 实现简单的Tab栏切换
  • 安装图标插件并配置插件选项
  • 完成Tab栏字体图标的展示
1-3 首页效果
  • 实现首页的轮播图
  • 实现首页的6宫格布局
1-4 ReactNative路由配置
  • 为ReactNative配置路由
  • 使用路由的Actions组件实现编程式导航
1-5 电影列表和详情页效果
  • 使用fetch获取电影列表数据
  • 移动App开发视频-渲染电影列表数据
  • 美化列表布局并绘制分割线
  • 实现电影列表下拉加载更多
  • 实现电影详情页面的制作
1-6 ReactNative电影项目发布
  • 发布安卓项目的Release版本
  • 完成拍照功能并重新发布Release版本

阶段八 在线教育行业-全栈式在线教育后台管理项目

展开
第一章 全栈式在线教育后台管理项目
1-1 SVN介绍和使用
  • 课程介绍
  • 版本控制概念
  • SVN交互流程
  • VisualSVN服务安装
  • 配置和管理SVN服务
  • SVN使用基本操作
  • SVN其它操作
  • 版本控制使用建议
1-2 git和github介绍和应用
  • git简介
  • git交互流程
  • git的安装和配置
  • git基本使用
  • 总结git基本使用交互流程
  • 工作区-暂存区-本地仓库
  • github介绍和创建github账户
  • git结合github交互协作
  • 关于remote远程仓库提交
  • git基本命令 bash操作命令
  • vi编辑器介绍
  • git增加和删除文件
  • git提交
  • git回滚和撤销
  • git分支基本操作
  • 回顾分支的基本操作
  • Git-Flow分支工作流管理策略
  • 总结Git-Flow
  • 关于Git提交作者和邮箱的作用
  • Github多人协作-Collaborator
  • Pull-Request
  • Gitlab介绍
  • Github-Pages结合Hexo搭建静态博客
  • 修改Hexo博客主题
1-3 ES6语法介绍和使用
  • Ecmascript6介绍
  • let
  • const
  • 结构赋值
  • 模板字符串
  • 数组的扩展
  • 函数的扩展01
  • 函数的扩展-箭头函数
  • 对象的扩展
  • babel转码器
1-4 在线教育系统项目初始化
  • 在线教育系统介绍
  • 项目初始化并配偶babel
  • 配置npm-script区分开发环境和生产环境
  • 演示npm的scrip脚本配置
  • Ecmascript6模块化
  • 走通首页
  • 复习babel-01
  • babel-02
  • babel-register
1-5 Express中间件使用
  • Express-hello-world
  • Express-处理静态资源
  • 中间件介绍
  • 中间件执行机制
  • 自己封装实现static中间件
  • 中间件-记录日志
  • 中间件-404
  • 中间件-错误处理01
  • 中间件-错误处理02
  • 关于Express-API文档
1-6 Nunjucks模板引擎
  • 配置使用nunjucks模板引擎
  • nunjucks模板引擎-布局
  • 使用nunjucks模板引擎布局项目模板页
  • 分析广告管理路由
  • 处理表单post请求体
  • 利用中间件解析表单POST请求体数据
  • jsonp
1-7 nvm、nrm、yarn介绍
  • nvm介绍
  • nrm介绍
  • yarn介绍
1-8 MongoDB和mongoose介绍和应用
  • 复习post请求以及res-json方法
  • 复习MongoDB-数据存储结构
  • 关于mongodb驱动包和数据服务的启动
  • 复习解析表单POST请求体中间件
  • 使用mongodb操作数据库
  • 全局统一处理错误
  • 解决错误处理中的中间件执行的问题
  • mongoose介绍
  • 使用mongoose完成广告管理中数据的添加
  • 查询所有数据和根据ID查询单个数据
  • 更新广告数据
  • 删除广告数据
1-9 全栈式在线教育项目业务逻辑实现
  • 根据业务提取对应的路由模块
  • 关于模块之间的交互说明
  • 处理列表页渲染和添加页渲染
  • 处理客户端广告管理表单提交
  • 有文件的表单提交01
  • 使用formidable处理有文件上传的表单
  • 将formidable配置到项目中
  • 表单文件上传-FormData
  • 完成表单文件提交后台处理
  • 加载列表数据和分页介绍
  • 服务端分页展示数据
  • 服务端分页查询
  • 服务端分页小结
  • 将项目push到github上
  • 在客户端配置art-template模板引擎
  • 完成异步无刷新分页
  • Promise-封装
  • Promise-then
  • 封装Promise-API
  • 封装XMLHttpRequest-Promise
  • Promise-catch异常处理
  • 将项目中添加广告代码改为Promise版本