day08_电商项目_项目实战day2.ppt

Vue_day08,Contents,目,录,后台首页的基本布局 左侧菜单栏 用户列表展示 添加用户,Contents,目,录,后台首页的基本布局 左侧菜单栏 用户列表展示 添加用户,了解后台主页的基本布局,要点提示,主页-实现基本的主页布局,掌握程度：了解,1.1 实现基本的主页布局,了解header区域的布局和样式设置,要点提示,主页-美化主页的header区域,掌握程度：了解,1.2 美化主页的header区域,练习,完成后台首页的基本布局完成header区域的布局和css设置,提示,按照步骤完成后台首页布局及headerA.添加页面html结构B.通过element-ui组件同名的类名添加样式,5分钟,1.2 美化主页的header区域,案例：完成后台首页布局及header,了解后台首页的导航菜单如何实现,要点提示,主页-实现导航菜单的基本结构,掌握程度：了解,1.3 实现导航菜单的基本结构,了解axios拦截器添加token验证如何实现,要点提示,主页-通过axios拦截器添加token验证,掌握程度：了解,1.4 通过axios拦截器添加token验证,练习,完成后台首页的左侧菜单栏布局完成axios拦截器验证,提示,按照步骤完成左侧菜单栏及axios拦截器A.复制element-ui的菜单组件代码B.在element.js中导入菜单栏等相关组件C.在main.js中添加拦截器代码axios.interceptors.request.use(config=/为请求头对象，添加token验证的Authorization字段 config.headers.Authorization=window.sessionStorage.getItem(token)return config),5分钟,1.4 通过axios拦截器添加token验证,案例：完成左侧菜单栏及axios拦截器,Contents,目,录,后台首页的基本布局 左侧菜单栏 用户列表展示 添加用户,了解如何使用axios发送请求获取数据,要点提示,主页-获取左侧菜单数据,掌握程度：了解,2.1 获取左侧菜单数据,理解使用双重v-for循环渲染一级菜单以及二级菜单,要点提示,主页-通过双层for循环渲染左侧菜单,掌握程度：了解,2.2 通过双层for循环渲染左侧菜单,了解通过active-text-color属性更改激活项颜色了解通过数据绑定设置菜单图标,要点提示,主页-为选中项设置字体颜色并添加分类图标,掌握程度：了解,2.3 为选中项设置字体颜色并添加分类图标,练习,完善侧边栏菜单,提示,按照步骤完善侧边栏菜单A.编写代码请求侧边栏数据B.编写双重v-for根据数据生成菜单C.通过数据改变i标签的类名设置菜单图标通过添加iconsObj数组保存菜单id对应的图标类名iconsObj:125:iconfont icon-user,103:iconfont icon-tijikongjian,.,10分钟,2.3 为选中项设置字体颜色并添加分类图标,案例：完善侧边栏菜单,了解添加unique-opened解决每次打开一个菜单项了解通过重置边框来解决菜单栏的错位视觉问题,要点提示,主页-每次只能打开一个菜单项并解决边框问题,掌握程度：了解,2.4 每次只能打开一个菜单项并解决边框问题,了解通过collapse属性设置菜单伸缩了解通过collapse-transition属性设置取消菜单伸缩动画了解在菜单折叠的时候需要重新设置菜单宽度的情况。,要点提示,主页-实现侧边栏的折叠与展开效果,掌握程度：了解,2.5 实现侧边栏的折叠与展开效果,了解添加后台首页重定向到Welcome的过程,要点提示,主页-实现首页路由的重定向效果,掌握程度：掌握,2.6 实现首页路由的重定向效果,了解使用postman发送请求调试接口,要点提示,主页-实现侧边栏路由链接的改造,掌握程度：了解,2.7 实现侧边栏路由链接的改造,练习,完成侧边栏菜单,提示,按照步骤完善侧边栏菜单A.解决菜单栏错位视觉，一次展示一个子菜单的问题B.通过绑定数据isCollapse完成菜单栏伸缩的功能C.设置后台首页默认重定向到/welcomeD.将菜单的index值绑定为”/+subItem.path”再给el-menu添加router属性开启点击菜单路由,8分钟,2.7 实现侧边栏路由链接的改造,案例：完成侧边栏菜单,Contents,目,录,后台首页的基本布局 左侧菜单栏 用户列表展示 添加用户,理解如何添加子级路由组件以及相应的规则,要点提示,用户列表-通过路由的形式展示用户列表组件,掌握程度：掌握,3.1 通过路由的形式展示用户列表组件,了解如何在sessionStorage中保存用户点击的菜单项了解通过default-active属性来设置激活项的方式,要点提示,用户列表-在sessionStorage中保存左侧菜单的激活状态,掌握程度：掌握,3.2 在sessionStorage中保存左侧菜单的激活状态,理解用户列表组件的基本机构绘制用户列表组件的布局结构,要点提示,用户列表-绘制用户列表组件的基础布局结构,掌握程度：了解,3.3 绘制用户列表组件的基础布局结构,练习,完成用户列表组件的布局,提示,按照步骤完成练习A.添加Users子级路由组件以及相应的路由规则B.使用sessionStorage保存用户点击的菜单C.使用绑定数据设置菜单组件的default-active属性以此动态改变默认激活菜单。D.添加Users组件中的面包屑导航E.完成卡片视图中的搜索和添加用户区域,8分钟,3.3 绘制用户列表组件的基础布局结构,案例：完成用户列表组件的布局,上午复习,Vue第八天-上午复习,在el-menu组件中设置硬前端路由件 属性可以用来伸缩菜单，硬前端路由件 可以设置伸缩时是否动画过渡在el-menu组件中设置硬前端路由件 属性可以开启子菜单路由，el-submenu组件的硬前端路由件 属性可以设置点击子菜单时跳转的位置在el-menu组件中硬前端路由件 属性可以设置激活菜单项的index值,上午复习,Vue第八天-上午复习,在el-menu组件中设置 collapse 属性可以用来伸缩菜单，collapse-transition可以设置伸缩时是否动画过渡在el-menu组件中设置 router 属性可以开启子菜单路由，el-submenu组件的index 属性可以设置点击子菜单时跳转的位置在el-menu组件中default-active属性可以设置激活菜单项的index值,了解如何发送请求获取用户列表数据,要点提示,用户列表-获取用户列表数据,掌握程度：掌握,3.4 获取用户列表数据,了解如何使用el-table组件展示用户列表数据,要点提示,用户列表-使用el-table组件渲染基本的用户列表,掌握程度：掌握,3.5 使用el-table组件渲染基本的用户列表,了解如何通过stripe添加索引列,