Skip to content

freekingg/mobileShop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 

Repository files navigation

koa+vue移动电商

node+vue全栈

从零开始搭建一个移动电商系统,包括首页展示,类别展示,购物功能,注册登录,积分系统,查找页面,后台接口设置,数据库采用在线mlab在线的mongo数据库

主要技术栈列表

  • Vue
  • Vuex
  • Router
  • Vant
  • Node
  • Koa2
  • Mongoose
  • MongoDB

目录结构

主要功能

  • 首页展示
  • 类别展示
  • 购物功能
  • 注册登录
  • 积分系统
  • 查找页面
  • 后台接口设置
  • 文章分类
  • 权限管理

开发流程

  • 前端环境的搭建
  • 优雅引入Vant组件库
  • 移动端屏幕适配基础
  • 首页布局和路由设置
  • 首页搜索区域的布局
  • 首页轮播图的制作
  • easyMock和Axios的使用
  • Mock数据的使用flex布局
  • 商品推荐vue-awesome-swiper
  • vue-awesome-swiper 详讲1
  • vue-awesome-swiper 详讲2
  • 首页楼层区域布局
  • 楼层组件的封装和watch使用
  • 楼层组件的完善
  • Filter在实战中的使用
  • 首页热卖模块的Van-list组件使用
  • 编写后台服务接口配置文件
  • 安装Koa2到项目中来
  • 安装MongoDB数据库
  • Koa用Mongoose连接数据库(1)
  • Koa用Mongoose连接数据库(2)
  • Mongoose的Schema建模介绍
  • 载入Schema和插入查出数据
  • 打造安全的用户密码加密机制
  • 编写注册页面前端视图
  • Koa2的用户操作的路由模块化
  • 打通注册用户的前后端通讯
  • 用户注册数据库操作
  • 注册的防重复提交
  • 注册时的前端验证
  • Vue的登录界面制作和路由配置
  • 登录的服务端业务逻辑代码
  • 登录的前端交互效果制作和登录状态存储
  • 商品详细数据的提纯操作
  • 批量插入商品详情数据到MongoDB中
  • 商品大类的Shema建立和导入数据库
  • 商品子类的Shema建立和导入数据库
  • 编写商品详情页的数据接口
  • 商品详情页路由的制作和参数的传递
  • 商品详情的页面模板编写-1
  • 商品详情的页面模板编写-2
  • 商品详情的页面模板编写-3
  • 分类页面的数据读取
  • 补充商品详细页的滑动切换和吸顶效果
  • 商品列表页的布局-1
  • 商品列表页的大类交互效果制作
  • 一二级分类的联动效果制作
  • 商品列表页上拉加载效果的实现
  • 商品列表页下拉刷新效果的实现
  • 商品列表的商品数据读取

ScreenShot

About

Vue+Koa的实战移动商城

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published