前端精品各行业项目库

【前端】精品各行业项目库中，截止目前包含8个项目（后续会不断的增加项目，但课程价格保持不变），8个项目设计到各个领域和行业，能够帮助同学丰富各个领域和行业的业务

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

  *   第一章 微金所响应式开发项目/

    *   微金所头部布局/

      *   移动web-wjs页面的整体结构

      *   移动web-微金所页面的字体图标样式准备

      *   移动web-微金所头部块制作(上)

      *   移动web-微金所头部块制作(中)

      *   移动web-微金所头部块制作(下)

    *   微金所导航布局/

      *   移动web-导航条组件的说明

      *   移动web-导航条组件的样式修改(上)

      *   移动web-导航条组件的样式修改(下)

    *   微金所轮播图效果/

      *   移动web-轮播图的效果分析

      *   移动web-轮播图插件的使用说明

      *   移动web-移动端的轮播图效果实现

      *   移动web-非移动端的轮播图效果实现

      *   移动web-使用响应式工具实现轮播图

      *   移动web-使用js实现轮播图

      *   移动web-实现轮播图的滑动操作

      *   移动web-微金所首页轮播图的完成

    *   微金所标中部布局/

      *   移动web-微金所信息块制作

      *   移动web-微金所预约块制作

      *   移动web-标签页的使用

      *   移动web-标签页导航样式修改(上)

      *   移动web-标签页导航样式修改(下)

      *   移动web-详细产品块结构

      *   移动web-详细产品块样式(上)

      *   移动web-详细产品块样式(中)

      *   移动web-详细产品块样式-宝北的添加

      *   移动web-产品active块的制作

      *   移动web-产品块标签页导航条的宽度计算

      *   移动web-产品块标签页导航条的滑动

    *   微金所底部布局和效果/

      *   移动web-新闻块结构分析

      *   移动web-新闻块结构样式(上)

      *   移动web-新闻块结构样式(中)

      *   移动web-新闻块结构样式(下)

      *   移动web-合作伙伴块制作

      *   移动web-bootstrap定制的简单说明

    *   rem介绍和应用/

      *   移动web-em和rem的介绍

      *   移动web-rem实现适配的简单说明

      *   移动web-rem案例-优惠活动(上)

      *   移动web-rem案例-优惠活动(中)

      *   移动web-rem案例-优惠活动(下)

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

  *   第一章 移动web京东项目/

    *   首页布局/

      *   移动web-京东首页公共样式

      *   移动web-京东首页整体结构

      *   移动web-京东首页顶部结构块的制作方式

      *   移动web-京东首页顶部结构块制作

      *   移动web-京东首页轮播图结构块制作

      *   移动web-京东首页导航块制作

      *   移动web-产品块制作(图片区域上)

      *   移动web-产品块制作(图片区域下)

      *   移动web-产品块制作(秒杀标题栏)

      *   移动web-产品块制作(秒杀块内容)

    *   首页动态效果/

      *   移动web-京东首页搜索块js效果

      *   移动web-京东首页倒计时js效果

      *   移动web-京东首页-轮播图(拖动修改页面结构和样式)

      *   移动web-京东首页-轮播图(js添加首尾图片)

      *   移动web-京东首页-轮播图(js设置样式)

      *   移动web-京东首页-轮播图(js实现自动轮播)

      *   移动web-京东首页轮播图自动轮播完善

    *   移动端的touch事件/

      *   移动web-移动端的touch事件简介

      *   移动web-移动端的touch事件(手指对象数组)

      *   移动web-移动端的touch事件(手指对象的坐标获取)

      *   移动web-使用touch事件实现元素的拖拽

      *   移动web-touch事件源参数中的target

    *   轮播图效果实现/

      *   移动web-轮播图-实现滑动操作

      *   移动web-轮播图-实现滑动操作(细节)

      *   移动web-轮播图-松开手指之后的处理

      *   移动web-轮播图-添加过渡结束的监听

      *   移动web-轮播图中一个bug的解决

      *   移动web-轮播图点标记的设置

    *   zepto.js/

      *   移动web-zepto的基本特点和下载

      *   移动web-使用zepto实现轮播图(上)

      *   移动web-使用zepto实现轮播图(中)

      *   移动web-使用zepto实现轮播图(下)

      *   移动web-zepto的定制

    *   分类页面布局和滑动/

      *   移动web-分类页面结构的简单说明

      *   移动web-分类页面的全屏结构创建

      *   移动web-分类页面顶部搜索块的制作

      *   移动web-分类页面左侧导航块的制作

      *   移动web-分类页面右侧商品块的制作

      *   移动web-初步实现左侧栏的滑动

      *   移动web-设置滑动区间

      *   移动web-松开手指之后的处理

      *   移动web-cilck等操作在移动端的延迟

    *   移动端tap事件/

      *   移动web-移动端的tap事件

      *   移动web-移动端tap事件的封装

      *   移动web-分类页面tap事件的添加(上)

      *   移动web-分类页面tap事件的添加(下)

      *   移动web-使用zepto来实现左侧单击操作

      *   移动web-移动端touch事件所产生的点透问题

    *   移动端插件的使用/

      *   移动web-fastclick的使用

      *   移动web-使用fastclick实现分类页面左侧栏的点击操作

      *   移动web-iscroll的使用说明(上)

      *   移动web-iscroll的使用说明(下)

      *   移动web-swiper插件的使用

      *   移动web-swiper插件的使用介绍

      *   移动web-使用iscroll插件完成分类页面右侧内容块的滑动操作

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

  *   第一章 豆瓣电影项目/

    *   豆瓣电影项目说明/

      *   1豆瓣电影_项目说明

      *   2豆瓣电影_corstoggle展示&准备代码说明

    *   豆瓣电影城市选择功能/

      *   3确认城市选择插件

      *   4引入修改后的插件

      *   5城市选择功能完成

    *   豆瓣电影正在热映渲染和加载更多功能/

      *   6渲染正在热映

      *   7加载更多功能

    *   豆瓣电影星级评分功能/

      *   8星级评分功能

    *   豆瓣电影影评效果实现/

      *   9影评选项卡第一种做法

      *   10影评选项卡第二种做法

      *   11影评中的tab切换

      *   12影评渲染完毕

    *   豆瓣电影分页功能/

      *   13分页功能分析

      *   14分页效果实现

      *   15分页效果bug修复

    *   豆瓣电影项目总结/

      *   16项目总结

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

  *   第一章 H5购物网站项目/

    *   fullpage插件介绍和使用/

      *   案例介绍

      *   fullpage简介

      *   fullpage使用

    *   第一屏布局和动画/

      *   添加8屏背景

      *   添加小圆点

      *   第一屏幕布局

      *   第一屏动画制作

    *   第二屏布局和动画/

      *   第二屏幕动画制作-回调函数1

      *   第二屏幕搜索制作2

      *   第二屏幕搜索制作3

      *   第二屏幕搜索动画制作

      *   第二屏幕沙发动画制作

      *   第二屏幕图片切换动画

    *   第三屏布局和动画/

      *   第三屏幕动画布局

      *   二三屏幕沙发布局（重要）

      *   沙发动画1

      *   沙发移动距离的计算

      *   第二屏结束后再执行沙发动画

      *   第三屏幕动画制作完成

      *   倾斜沙发制作

    *   第四屏布局和动画/

      *   第四屏幕云彩动画

      *   购物车布局

      *   购物车动画制作

      *   作业安排

      *   jquery easing使用

      *   第4屏幕node布局

      *   第4屏动画完成

    *   第五屏布局和动画/

      *   第5屏布局

      *   第5屏动画制作

      *   复习视距和translateZ

      *   添加文字旋转

    *   第六屏布局和动画/

      *   第6屏布局

      *   第6屏幕动画（一）

      *   bug问题解决

      *   第6屏小车动画

      *   第6屏幕boy制作

      *   第6屏幕girl制作

      *   第6屏幕完成

    *   第七、八屏布局和动画/

      *   第7屏幕制作

      *   第8屏幕布局

      *   第8屏手跟随鼠标动画（一）

      *   第8屏手跟随鼠标动画（二）

      *   第8屏手再来一次制作

      *   bug解决2

      *   继续往下制作案例结束

*   阶段五 在线服务行业-黑马博客项目（Express+MySQL）/

  *   第一章 node博客项目【v2.0】/

    *   博客项目-登录与注册/

      *   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.抽离公共的模板部分

    *   博客项目-文章发表/

      *   02.渲染发表文章页面的基本结构

      *   01拦截文章添加页面的非登录请求

      *   03.实现发表文章功能

      *   04.渲染基本的文章详情页

      *   05.转换markdown文本为html并渲染文章详情页的数据

      *   06.控制编辑按钮的权限

      *   07.完成编辑文章的功能

      *   08.渲染首页完整的文章列表

      *   09.渲染分页的页码条和激活的页码

      *   10.实现真正的分页和分页页码条的控制

      *   11.使用bcrypt加密算法对用户密码进行加密存储

      *   12.演示如何把黑马博客发布到服务器上去运行

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

  *   第一章 vue商城项目/

    *   移动端UI框架/

      *   scoped属性选择器的实现原理

      *   Mint-UI中按钮组件的使用

      *   Mint-UI中Toast组件的使用

      *   Mint-UI的按需导入组件

      *   介绍MUI

      *   MUI的使用

    *   首页布局和动画效果/

      *   项目-vue项目演示

      *   项目-整理出一个基本的项目模板

      *   项目-制作项目首页的Header和Tabbar区域

      *   项目-把本地项目托管到码云中

      *   项目-使用vs code默认集成的Git工具快速提交代码

      *   项目-完成tabbar的小图标设置

      *   项目-完成tabbar路由链接的改造和路由高亮

      *   项目-实现tabbar路由组件的切换功能

      *   项目-完成首页轮播图样式布局

      *   项目-完成首页中轮播图数据的加载

      *   项目-完成首页中九宫格改造工程

      *   项目-完成组件切换时候的动画效果

      *   项目-将一天的代码上传到Git服务器

    *   Promise/

      *   Promise-关于Promise要解决回调地狱问题的说明

      *   Promise-基本概念的介绍【重要】

      *   Promise-形式上的和具体的Promise异步操作的区别

      *   Promise-Promise实例只要被创建就会立即执行里面的异步方法

      *   Promise-通过.then指定成功和失败的回调

      *   Promise-分析Promise的执行步骤

      *   Promise-打开Promise的正确使用方式

      *   Promise-捕获异常的两种方式

      *   Promise-Jquery中Ajax使用Promise指定成功回调函数

    *   新闻资讯列表页布局和效果/

      *   项目-改造新闻资讯的路由链接

      *   项目-绘制新闻资讯列表页面布局

      *   项目-获取新闻资讯列表并渲染页面

      *   项目-完成新闻列表中时间格式化

      *   项目-改造新闻列表跳转到新闻详情的路由

      *   项目-获取并渲染新闻详情数据

    *   评论功能/

      *   项目-绘制评论子组件的样式

      *   项目-加载首页评论内容

      *   项目-完成评论数据的点击加载更多功能

      *   每日打卡

      *   项目-完成发表评论的功能

      *   项目-改造图片分析按钮为路由的链接并显示对应的组件页面

    *   图片列表和详情页效果/

      *   项目-图片列表顶部导航条制作1

      *   项目-图片列表顶部导航条制作2-解决初始化问题

      *   项目-解决tabbar无法正常切换组件的问题

      *   项目-渲染分类列表的数据

      *   项目-获取对应分类的图片列表数据并渲染页面

      *   项目-美化图片列表并实现懒加载效果

      *   项目-实现图片详情的数据加载和界面美化

      *   项目-完成图片详情中缩略图的制作

    *   商品列表和商品详情页布局和效果/

      *   项目-改造商品列表路由

      *   项目-实现商品列表的经典两列布局

      *   项目-在安卓手机中调试网站

      *   项目-加载商品列表中的数据并实现加载更多

      *   项目-vue-router中编程式导航的介绍

      *   项目-绘制商品详情页面的卡片视图

      *   项目-获取商品详情的轮播图数据并分析如何抽离轮播组件

      *   项目-抽离轮播图组件

      *   项目-解决轮播图宽度问题

      *   项目-绘制商品购买区域的样式

      *   项目-渲染商品详情页面的数据

      *   项目-使用编程式导航实现图文介绍和商品评论跳转

      *   项目-实现商品详情中的图文介绍和评论页面渲染

    *   购物车小球动画效果/

      *   项目-实现基本的加入购物车小球动画

      *   项目-完美实现小球动画适配不同滚动条位置和分辨率

      *   项目-每当numbox的值改变立即把购买数量传递给父组件

      *   项目-使用JS的API设置numbox的最大值

    *   vuex/

      *   项目-为什么要使用vuex

      *   项目-vuex的基本概念

      *   项目-将store中的数据显示到组件中

      *   项目-使用mutations来操作state中的数据

      *   项目-在提交mutaions方法的时候提交参数

      *   项目-使用getters包装数据并总结vuex的使用方式

    *   实现购物车效果/

      *   vue项目-启用vuex并设计购物车数据存储方式

      *   vue项目-实现点击加入购物车功能

      *   vue项目-实现徽标数值的自动更新

      *   vue项目-实现购物车商品的本地持久存储

      *   vue项目-绘制购物车页面中商品列表的布局

      *   vue项目-获取购物车中所有商品列表并加载显示

      *   vue项目-在循环购物车列表时候初始化数量值

      *   vue项目-实现购物车商品数量改变同步到store中

      *   vue项目-实现购物车中商品的删除

      *   vue项目-绘制结算区域样式

      *   vue项目-把store中选中的状态同步到页面上

      *   vue项目-同步商品的勾选状态到store中保存

      *   vue项目-实现勾选数量和总价的自动计算

      *   vue项目-实现返回按钮的功能

    *   项目外网测试/

      *   vue项目-将项目托管到Apache并启用Gzip压缩

      *   vue项目-使用ngrok把本机的网站端口映射到外网

    *   axios知识拓展/

      *   axios文档介绍

      *   axios常用api讲解

      *   vue中使用axios

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

  *   第一章 ReactNative电影项目/

    *   项目展示和配置/

      *   ReactNative项目的演示

      *   ReactNative学习的步骤

      *   ReactNative开发准备工作-配置自己的手机

      *   初始化RN项目并解读提示面板的信息

      *   使用react-native start重启packager服务器

      *   修改RN项目的主页面

      *   介绍App.js组件中代码的作用

      *   TextInput文本框的基本使用

      *   使用Image引入图片资源的两种方式

      *   Button组件和ActivityIndicator的基本使用

      *   ScrollView组件实现页面滚动

    *   Tab栏效果/

      *   实现简单的Tab栏切换

      *   安装图标插件并配置插件选项

      *   完成Tab栏字体图标的展示

    *   首页效果/

      *   实现首页的轮播图

      *   实现首页的6宫格布局

    *   ReactNative路由配置/

      *   为ReactNative配置路由

      *   使用路由的Actions组件实现编程式导航

    *   电影列表和详情页效果/

      *   使用fetch获取电影列表数据

      *   移动App开发视频-渲染电影列表数据

      *   美化列表布局并绘制分割线

      *   实现电影列表下拉加载更多

      *   实现电影详情页面的制作

    *   ReactNative电影项目发布/

      *   发布安卓项目的Release版本

      *   完成拍照功能并重新发布Release版本

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

  *   第一章 全栈式在线教育后台管理项目/

    *   SVN介绍和使用/

      *   课程介绍

      *   版本控制概念

      *   SVN交互流程

      *   VisualSVN服务安装

      *   配置和管理SVN服务

      *   SVN使用基本操作

      *   SVN其它操作

      *   版本控制使用建议

    *   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博客主题

    *   ES6语法介绍和使用/

      *   Ecmascript6介绍

      *   let

      *   const

      *   结构赋值

      *   模板字符串

      *   数组的扩展

      *   函数的扩展01

      *   函数的扩展-箭头函数

      *   对象的扩展

      *   babel转码器

    *   在线教育系统项目初始化/

      *   在线教育系统介绍

      *   项目初始化并配偶babel

      *   配置npm-script区分开发环境和生产环境

      *   演示npm的scrip脚本配置

      *   Ecmascript6模块化

      *   走通首页

      *   复习babel-01

      *   babel-02

      *   babel-register

    *   Express中间件使用/

      *   Express-hello-world

      *   Express-处理静态资源

      *   中间件介绍

      *   中间件执行机制

      *   自己封装实现static中间件

      *   中间件-记录日志

      *   中间件-404

      *   中间件-错误处理01

      *   中间件-错误处理02

      *   关于Express-API文档

    *   Nunjucks模板引擎/

      *   配置使用nunjucks模板引擎

      *   nunjucks模板引擎-布局

      *   使用nunjucks模板引擎布局项目模板页

      *   分析广告管理路由

      *   处理表单post请求体

      *   利用中间件解析表单POST请求体数据

      *   jsonp

    *   nvm、nrm、yarn介绍/

      *   nvm介绍

      *   nrm介绍

      *   yarn介绍

    *   MongoDB和mongoose介绍和应用/

      *   复习post请求以及res-json方法

      *   复习MongoDB-数据存储结构

      *   关于mongodb驱动包和数据服务的启动

      *   复习解析表单POST请求体中间件

      *   使用mongodb操作数据库

      *   全局统一处理错误

      *   解决错误处理中的中间件执行的问题

      *   mongoose介绍

      *   使用mongoose完成广告管理中数据的添加

      *   查询所有数据和根据ID查询单个数据

      *   更新广告数据

      *   删除广告数据

    *   全栈式在线教育项目业务逻辑实现/

      *   根据业务提取对应的路由模块

      *   关于模块之间的交互说明

      *   处理列表页渲染和添加页渲染

      *   处理客户端广告管理表单提交

      *   有文件的表单提交01

      *   使用formidable处理有文件上传的表单

      *   将formidable配置到项目中

      *   表单文件上传-FormData

      *   完成表单文件提交后台处理

      *   加载列表数据和分页介绍

      *   服务端分页展示数据

      *   服务端分页查询

      *   服务端分页小结

      *   将项目push到github上

      *   在客户端配置art-template模板引擎

      *   完成异步无刷新分页

      *   Promise-封装

      *   Promise-then

      *   封装Promise-API

      *   封装XMLHttpRequest-Promise

      *   Promise-catch异常处理

      *   将项目中添加广告代码改为Promise版本