git地址 视频地址 项目准备 1.项目介绍 2.项目搭建 3.使用scss预处理器 4.配置基础路由 5.组件库antd使用 6.配置别名路径 8.@别名路径提示 9.安装dev-tools调试工具 登录模块 1.基本结构搭建 2. 创建表单结构 3. 表单校验实现 4. 获取登录表单数据 5. 封装http工具模块 6. 配置登录Mobx 7. 实现登录逻辑 8. token持久化 封装工具函数 持久化设置 9. 请求拦截器注入token 10. 路由鉴权实现 3. Layout模块 1. 基本结构搭建 2. 二级路由配置 3. 菜单高亮显示 4. 展示个人信息 5. 退出登录实现 6. 处理Token失效 7. 首页Home图表展示 4. 文章管理模块 1. 筛选区结构 2. 表格区域结构 3. 渲染频道数据 4. 渲染表格数据 5. 筛选功能实现 6. 分页功能实现 7. 删除功能 8. 编辑文章跳转 5. 发布文章模块 1. 基本结构搭建 2. 富文本编辑器 3. 频道数据获取 4. 上传封面实现 5.切换图片Type 6. 控制最大上传数量 7. 暂存图片列表实现 8. 发布文章实现 9. 编辑文章-文案适配 10.编辑文章-数据获取 11. 编辑文章-回显Form 12. 编辑文章-回显Upload相关 11. 编辑保存 6. 项目打包 1. 项目打包 2. 项目本地预览 3. 打包体积分析 4. 优化-配置CDN 5. 优化-路由懒加载 ————————————————

一、基础环境配置 1.vue-element-admin后台集成方案 2.搭建项目前的一些基本准备 （1）nodejs环境 （2）git版本控制 （3）npm淘宝镜像 （4）vscode编辑器 ​3.项目模板启动 （1）git拉取基础项目模板 （2）安装项目依赖 4.目录结构 5.项目运行机制 （1）main.js （2）App.vue （3）Vuex结构 （4）scss （5）icon 6.API模块和请求封装模块介绍 （1）Axios的拦截器介绍 7.建立远程Git仓库并完成初始提交 二、登录模块 1.表单校验 2.Vue-Cli配置跨域代理 （1）**开发环境的跨域** （2）配置反向代理 3.封装单独的登录接口 4.封装Vuex的登录Action并处理token 5.处理axios响应拦截器 6.登录页面调用登录action 7.主页的token拦截处理 （1）权限拦截处理流程图 （2）流程图转化代码 三、主页模块 1.访问权限拦截 2.token注入和token失效的主动介入 首先在登录action中存入时间戳 在请求拦截器中注入token

1. 项目介绍 2. 初始化项目 2.1 初始化项目 2.2 梳理项目结构 2.3 绘制 tabBar 2.4 修改导航栏样式 3. 首页 3.1 为异步 API 启用 Promise 功能 3.2 轮播图数据渲染 3.3 获取首页分类选项数据 3.4 渲染分类数据项对应的UI结构 3.5 美化分类数据项的UI显示效果 3.6 获取楼层相关的数据 3.7 渲染楼层UI结构 3.8 美化楼层UI结构 3.9 点击楼层图片跳转到商品列表页面 4. 优化 4.1 把页面的业务逻辑抽离到单独的 `mixin` 文件中 4.2 封装 `baseToast` 函数提示错误消息 4.3 封装 `wepy.get` 函数发起get请求 4.4 封装 `wepy.post` 函数发起get请求 5. 分类页面 5.1 自定义分类页面的编译模式 5.2 获取分类数据列表 5.3 下载并安装 `vant` 小程序UI组件库 5.4 将 vant 中的徽章组件注册为全局组件 5.5 渲染左侧的一级分类列表结构 5.6 使用 `scroll-view` 优化左侧分类的滚动效果 5.7 动态获取窗口的可用高度 5.8 根据一级分类的变化动态切换二级分类数据 5.9 渲染二级和三级分类的UI结构 5.10 点击三级分类跳转到商品列表页面 6. interceptor 拦截器 6.1 介绍 wepy 中的拦截器 6.2 实现数据加载期间的loading效果 7. 搜索 7.1 全局注册搜索组件并渲染到页面中 7.2 根据关键字的变化动态获取搜索建议列表数据 7.3 解决搜索关键字为空时候的小Bug 7.4 通过Cell单元格组件渲染搜索建议列表的UI结构 7.5 点击搜索建议项导航到商品详情页 7.6 触发搜索事件后导航到商品列表页面 7.7 页面加载期间读取搜索关键词列表 7.8 将关键词存储到Storage中 7.9 定义计算属性来决定是否展示历史搜索区域 7.10 绘制历史搜索头部区域的UI结构 7.11 渲染历史搜索列表的UI结构 8. 商品列表 8.1 处理请求参数 8.2 获取商品列表数据 8.3 循环渲染商品列表的UI结构 8.4 初步实现上拉加载更多的操作 8.5 通过公式判断列表数据是否全部加载完毕 8.6 通过 `isover` 控制数据加载完毕后的提示消息 8.7 通过 `isloading` 防止重复发起数据请求 8.8 下拉刷新 8.9 通过 callback 回调函数优化关闭下拉刷新的行为 8.10 点击商品列表Item项导航到商品详情页 9. 商品详情 9.1 获取商品详情数据 9.2 渲染商品详情页的轮播图 9.3 绘制价格名称运费区域 9.4 绘制促销已选区域 9.5 绘制收货地址区域 9.6 注册并使用标签页组件 9.7 渲染规格参数面板的UI结构 9.8 渲染图文详情面板 9.9 实现轮播图预览效果 9.10 选择收获地址 9.11 通过计算属性动态渲染收货地址 9.12 全局注册并使用商品导航组件 9.13 客服功能 10. 加入购物车 10.1 为加入购物车按钮绑定单击事件处理函数 10.2 在`app.wpy`中定义全局共享的数据和方法 10.3 把商品详情直接存储到购物车中 10.4 优化商品对象存储到购物车中的过程 10.5 防止商品重复添加 10.6 持久化存储购物车数据 10.7 自定义编译模式并美化空白购物车的页面结构 11. 购物车 11.1 实现空白购物车和非空购物车的按需展示 11.2 渲染购物车列表标题 11.3 循环渲染基本的商品列表结构 11.4 通过插槽自定义渲染商品的价格和数量 11.5 美化商品价格和数量区域 11.6 数量改变时获取最新的数量值和当前商品的Id 11.7 完成商品数量的更新操作 11.8 在商品之间渲染分割线 11.9 通过thumb插槽渲染复选框和缩略图 11.10. 美化复选框和缩略图的样式 11.11 监听复选框状态变化的事件 11.12 修改商品的选中状态 11.13 初步实现滑动删除的UI效果 11.14 美化滑动单元格右侧的删除按钮 11.15 根据Id从购物车列表中删除对应的商品 11.16 渲染提交订单区域的UI结构 11.17 通过计算属性动态计算勾选商品的总价格 11.18 通过计算属性判断全选的状态 11.19 点击全选更新所有商品的选中状态 11.20 为TabBar中的购物车添加数字徽章 11.21 为商品详情页的购物车图标添加数字徽章 11.22 提交订单 12. 确认订单 12.1 修改确认订单页面的标题 12.2 渲染选择收货地址区域的UI结构 12.3 选择收货地址 12.4 在订单页面加载期间读取收货地址 12.5 通过计算属性控制收货地址按钮和收货人信息区域的按需显示 12.6 渲染并美化收货信息区域 12.7 点击联系*区域重新选择收货地址 12.8 渲染订单商品列表 12.9 渲染登录后下单的按钮 13. 订单支付 13.1 准备登录相关的参数 - 获取用户信息 13.2 准备登录相关的参数 - 获取用户登录凭证 13.3 实现登录功能并得到登录成功后的Token值 13.4 按需渲染订单支付区域 13.5 通过拦截器为header请求头添加Authorization字段 13.6 实现下单及支付功能 14. 订单列表 14.1 渲染标签页 14.2 获取订单列表数据 14.3 通过Panel面板渲染订单信息 14.4 把订单Item项的UI结构封装为自定义组件 14.5 通过repeat循环创建自定义组件 15. 发布小程序 ————————————————