本项目是集vue2.6+Vuex+Vue-router+Element UI+ES6+webpack+axios+Nodejs等技术栈打造的一款商城项目。内容包含:项目需求分析、首页组件和商品组件模块显示、用户模块显示、Token+JWT登录流程、购物车商品操作等功能。
本项目以实战项目为切入点,模拟公司Vue项目研发流程,从头到尾讲解项目功能实现和优化、打包上线流程等,帮助提高你的技术层级,突破技术瓶颈。
你将会学到
1、运用vue+vue-router+vuex+Element-UI搭建商城网站;2、对项目进行需求分析和模块划分以及功能划分;
3、实现首页+全部+品牌周边页面渲染;
4、查看商品详情页制作、商品排序以及分页功能实现;5、使用Token+JWT实现网站用户登录退出(后端);6、使用meta元信息实现路由权限控制;
7、实现加入购物车、图片懒加载功能;
8、实现数据持久化存储用户数据和购物车数据;9、项目优化以及如何打包上线整个流程;
课程大纲:
01Xmall商城项目介绍和课程目标
02初始化项目和项目插件依赖安装
03嵌套路由控制导航组件的显示
04Xmall商城导航组件实现
05Xmall商城首页轮播图实现
06首页接口编写、介乎以及数据渲染
07首页活动版块页面展示
08具名插槽在xmall商城中的体现
09热门商品、品牌周边模块实现
10全部商品页面功能分析、接口编写
11全部商品页面数据渲染
12全部商品页面排序、过滤、分页功能实现
13项目中如何监听复用组件的变化
14商品洋I情按口头现、、
15 Vuexx展示加入购物车效果
16 Token+JWT实现登录接口
17全局守卫用户跳转登录页面
18登录组件表单验证实现
19如何做数据持久化
20用户信息展示和退出操作
21加入购物车前端逻辑实现
22添加购物车和购物车数据接口编写
23加购物车操作和数据展示
24重载页面让购物车数据显示
25登录和未登录状态购物车数据合并
26购物车总数量和总价格计算
27项目优化(异步组件、懒加载等)
28项目上线之前bug修复
29测试接口迁移到node服务器、公共URL设置
30Xmall商城项目上线部署流程
发表评论(审核通过后显示) 取消回复