VueJs全栈-电商网站实战（41节）

Posted 2021-05-01 web前端教室

课程说明：

这套课程的内容是使用vueJs从零开始，开发一个移动版的电商网站，内容包括首页、产品详情页、产品列表页、注册登录、Mock数据生成、MongoDB数据库的操作等。每节课时间约15分钟。

<!-- 本课程不与任何其它课程相关联 -->

使用的技术栈为：

VueJs+nodeJs+Vant+mongoDB+koa2

课程适合人群：

1、对前端开发感兴趣，有意从事此职业的；

2、对VueJs有一些了解的；

3、比较适合平时工作忙、没什么时间的人；

4、想要提高自己前端开发能力的；

课程目标：

1、熟练nodeJs、VueJs、相关库的操作；

2、拥有基本的需求分析能力；

4、成为合格的前端全栈开发者；

下面是部分试看学习视频，如果你想获得试看的高清视频，就转发本文到某个前端微信群，我会发你下载链接，

// 往期章节列表：

<!-- 章节目录 -->

1，前端开发环境、搭建

- VueJs、nodeJs

2、优雅引入Vant组件库

- Vant

3、首页路由、Vant布局

- router

4、首页搜索条

- Vant布局

5、轮播图、懒加载

- Swipe组件

- 懒加载

6、mock、axios

- mock数据生成

- axios应用

7、生成商品分类栏

- 商品分类html

- css

- json

8、广告banner

- 广告图片、引用

9、推荐购买，vue-awesome-swiper，可以左右滑动

- 安装 vue-awesome-swiper

- 引入 

- 获取json生成

10、“各商品分类”区域布局

- 获得json

- 生成html、css

11、“各商品分类”的封装

- 编写组件

12、“各商品分类”title标题

- 各组件之间传值

13、钱数的filter过渡器，

- filer过滤器封装方法

- 引用、使用、优化filter

14、首页热卖模块的Van-list组件使用

- Van-list组件

15、编写后台服务接口配置文件

- api.config.js统一管理

- 导出、引入

16、安装Koa2到项目中来

  - koa2安装

  - koa2的hello world

17、 Koa用Mongoose连接数据库

- Mongoose是什么？

- 安装Mongoose

- 连接mongoDB

18、Mongoose的Schema建模介绍

- Schema是什么？

- 定义Schema

19、载入Schema和插入查出数据

- 插入一条数据

- 查询一条数据

20、开发注册页面

-用户注册

21、koa2用户路由模块

- koa-router

22、注册用户成功

- koa2跨域

- 接收、发送数据

23、vue、node、koa2操作mongoDB

- vue+node+koa

- view处理响应

24、防止重复提交

- 注册开关函数

- 再处理注册响应

25、前端验证

- vant的error-message

- 调整注册事件

26、登录页面

- vant登录页布局

- 路由调整

27、登录接口

- 密码对比

- 处理响应

28、登录交互

- 交互操作

- 状态保存

29、mongoDB的批量插入

- mongoDB操作

30、商品详情页的json接口

- 路由传参

- 开发productInfo.vue

- 修改路由

- vant框架组件

31、详情页-页面开发

- vant框架组件

32、分类页面

33、列表页面

34、父子类别的联动

35、上拉加载效果

36、下拉刷新效果

37、商品列表分页

- koa2修改

- find、limit

38、购物车页面

- shopCar.vue

- 路由添加

- 获取数据

39、购物车添加商品

- 维护购物车对象

40、购物车清空商品

41、商品价格统计

- 商品总计

- 商品总价

【立即购买】

扫码加我微信，转账 319 元，

或

// 购买课程后可以进课程答疑群，永久有效