技术胖Vue.js+Koa2移动电商实战视频教程
本帖最后由 show0p 于 2019-5-4 20:54 编辑技术胖Vue.js+Koa2移动电商实战视频教程自我介绍：
我是一个已经从事编程行业12年的码农，业余爱好就是写写博客录下课程。
以后技术胖，好好写博客，增加自己的技术能力，不忘初心。
这是我的第一套实战课程，希望小伙伴多支持。有很多不足，但是总要开始，只有在不足中不断成长，才能成功。 课程一共61集，10万多字文字版教程，从前端讲到全栈，希望小伙伴们有所收获。课程说明这个教程将全面讲解Vue+Koa的实战项目，学完本教程能成为以前端技术为主的全栈程序员。 这套课程总时长会超过20小时，每节课会控制在15分钟左右。
第01节：前端环境的搭建
前端开发环境搭建
一个README.md的重要性
总结
第02节：优雅引入Vant组件库
Vant简介
安装Vant
引入Vant的第一种方法（不推荐）
优雅的引入Vant
按需使用Vant组件
总结：
第03节：移动端屏幕适配基础
常见移动web布局适配方法
rem单位介绍
JS控制适配屏幕
总结
第04节：首页布局和路由设置
user-scalable设置
首页路由的配置
建立首页组件
Vant布局讲解
第05节：首页搜索区域的布局
解决小问题
搜索条的布局（search bar）
第06节：首页轮播图的制作
1.按需加载Swipe组件
2.下载这三张图片
开始制作轮播图
利用Vant实现图片轮播的懒加载
Chrome调试技巧 模拟慢速3G网络
第07节：easyMock和Axios的使用
Mock数据准备
进入easy-Mock
axios的引入
第08节：Mock数据的使用flex布局
首页商品分类栏的布局
编写html代码
CSS样式
广告Banner的布局
改造swpie组件
总结
第09节：商品推荐vue-awesome-swiper
先来简单的布局
安装 vue-awesome-swiper
引入 vue-awesome-swiper 的两种方式
获取推荐商品数据
编写swiper的html
第10节：vue-awesome-swiper 详讲1
一个最简单的轮播图
添加分页器
竖屏切换效果
第11节：vue-awesome-swiper 详讲2
区域滚动效果
让分页器可以自由选择
无限循环滚动
第12节：首页楼层区域布局
不规则的布局
第一步：先获取楼层1的数据
第二步编写HTML代码
第三步编写CSS样式
规则部分的布局
第一步布局我们的html
第二步编写CSS样式
楼层标题的布局
第13节：楼层组件的封装和watch使用
编写组件
引入组件
删除页面中的无用代码。
第14节：楼层组件的完善
楼层组件标题区域制作
给头部区域传值
完成其他两个楼层的代码编写
第15节：Filter在实战中的使用
编写过滤器通用方法
引入Filter
编写vue里的filter属性
在template中使用filter
优化我们的filter通用方法
第16节：首页热卖模块的Van-list组件使用
html+CSS部分的编写
Vant列表(List)组件的使用
商品显示组件的编写
第17节：编写后台服务接口配置文件
编写接口配置文件
第18节：安装Koa2到项目中来
安装Koa和MongoDB到项目中
编写一个Hello World 测试一下安装是否成功
第19节：安装MongoDB数据库
安装步骤
运行MongoDB服务端
下载Robo3
第20节： Koa用Mongoose连接数据库（1）
Mongoose概念
Mongoose的安装
连接数据库
第21节： Koa用Mongoose连接数据库（2）
增加Promise的支持
连接失败自动重连
全部文件
第22节： Mongoose的Schema建模介绍
Schema中的数据类型
Mongoose中的三个概念
初学定义一个用户Schema
第23节： 载入Schema和插入查出数据
载入所有Schema
插入一条数据
读出已经插入进去的数据
第24节： 打造安全的用户密码加密机制
加密处理
加盐处理
bcrypt的使用
第25节： 编写注册页面前端视图
注册页面的vue模板编写
第26节： Koa2的用户操作的路由模块化
安装koa-router
新建一个User.js的文件
让路由模块化
第27节：打通注册用户的前后端通讯
安装koa-bodyparser中间件
前台的axios请求处理
让koa2支持跨域请求
编写koa2接收前台数据的方法
第28节：用户注册数据库操作
Koa2的User.js 接口的完善
前端Vue的业务处理
第29节：注册的防重复提交
1.在按钮上绑定loading属性
2.改写我们的注册方法
解决一个网友的小问题
第30节：注册时的前端验证
1.首先为Field绑定error-message属性
2.编写验证方法checkFrom
3.重新编写注册方法
4.重新绑定注册按钮事件
第31节：Vue的登录界面制作和路由配置
1.复制Register.vue文件并进行修改
2. 配置路由,让页面可以正常访问
第32节：登录的服务端业务逻辑代码
Shema中的比对实例方法
编写登录的Api接口
前后端结合调试
第33节：登录的前端交互效果制作和登录状态存储
前端交互效果制作
保存用户登录状态
第34节：商品详细数据的提纯操作
用fs读入数据
写入到新的文件中
第35节：批量插入商品详情数据到MongoDB中
1.建立Goods的Schema
2.批量插入数据库的路由方法
3.把路由加入到index.js里
第36节：商品大类的Shema建立和导入数据库
1.编写Category的Schema
插入Mongodb数据库
第37节：商品子类的Shema建立和导入数据库
1.categorySub的Schema建立
2.保存到数据库的业务逻辑
第38节：编写商品详情页的数据接口
1.编写后台数据接口
2.编写Goods.vue 页面
3.把组件加入到路由管理中
改写程序，让程序更优雅
第39节：商品详情页路由的制作和参数的传递
修改goodsInfoComponent.vue文件
接收路由传递的参数
改写首页，传递goodsId参数
第40节：商品详情的页面模板编写-1
1.引入Vant框架中的NavBar组件
2.使用NavBar制作头部导航
3.编写商品头图部分
第41节：商品详情的页面模板编写-2
vant标签组建的使用
解决图片有空隙问题
第42节：商品详情的页面模板编写-3
加入Filter过滤器，来格式化价格
底部购买按钮和加入购物车按钮
第43节：分类页面的数据读取
读取大类别的API制作
读取小类别的API制作
根据商品类别获取商品列表
第44节：补充商品详细页的滑动切换和吸顶效果
Tab页的滑动切换
吸顶效果的制作
第45节：商品列表页的布局-1
建立页面和配置列表页路由
标题栏的布局
大类的侧边栏的布局
axios读取左侧大类
第46节：商品列表页的大类交互效果制作
把大类列表放到左侧导航上
点击后的交互效果制作-反白操作
第47节：一二级分类的联动效果制作
在serviceAPI.config.js中加入接口
改写后端接口
获取小类的方法
用Vant的Tabs组建实现联动
第48节：商品列表页上拉加载效果的实现
实现上拉加载效果
第49节：商品列表页下拉刷新效果的实现
1.引入Vant中的PullRefresh组件
2.增加下拉刷新用的变量和方法
3.编写template部分
第50节：商品类别分类的Koa2分页服务制作
修改Koa2服务代码
把写好的接口加入到前台
第51节：真实数据的上拉加载效果制作
在data属性里注册必要的参数
编写axios商品列表的获取方法
点击获取子类商品信息的方法
改造大类的方法
编写OnLoad方法，实现上来加载效果
编写html和CSS
第52节：真实数据的下拉刷新效果制作
下拉刷新效果的制作
补充，首页类别导航图片大小不一Bug的解决
第53节：Vue中图片失效替补图片的制作方法
制作一张替补图片
把图片放到相应位置
在图片位置加入onerror事件
第54节：商品列表页编程式导航的制作
编程式导航
价格过滤器的添加
第55节：购物车页面的的建立
建立购物车页面
加入头部区域
配置路由
得到购物车数据方法编写
第56节：购物车中商品的添加
向购物车中添加商品
第57节：购物车清空和商品布局(Flex)
上节课程序的问题说明
清空购物车按钮的制作
购物车商品的布局
第58节：购物车中的商品价格计算
商品价格的格式化
改造template,增加单个商品总价计算
商品总价的计算
第59节：底部导航栏和子导航的制作
引入tabbar组件
新建Main.vue文件
子导航的制作
第60节：底部导航栏优化
购物车页面底部导航的处理
商城首页不能拉到底部的修改
列表页Bug的解决
第61节：底部导航栏的keep-alive设置（完结）
**** Hidden Message *****
个最简单的轮播图 祝资源共享吧越来越火！ wqeqe 在上传？ 看起来好屌的样子 感谢感谢感谢感谢感谢感谢感谢感谢感谢 哇塞 谢谢分享！！！ swi2