day07_电商项目_项目实战day1

Vue day07 Contents 目 录 电商项目概述电商项目准备工作电商项目登录功能电商项目登出功能将开发的代码提交到码云 Contents 目 录 电商项目概述电商项目准备工作电商项目登录功能电商项目登出功能将开发的代码提交到码云 了解项目实战是做什么 要点提示 项目实战的学习目标 掌握程度 了解 1 1项目实战的学习目标 了解电商项目基本业务 要点提示 项目概述 电商项目基本业务概述 掌握程度 了解 1 2电商项目基本业务概述 了解电商项目的功能模块 要点提示 项目概述 电商后台管理系统的功能划分 掌握程度 了解 1 3电商后台管理系统的功能划分 了解电商项目使用了哪些技术以及项目的开发模式 要点提示 项目概述 项目的开发模式以及技术选型 掌握程度 了解 1 4项目的开发模式以及技术选型 Contents 目 录 电商项目概述电商项目准备工作电商项目登录功能电商项目登出功能将开发的代码提交到码云 了解整个项目初始化的过程 要点提示 项目初始化 前端项目初始化 掌握程度 了解 2 1前端项目初始化 练习 创建电商项目 提示 按照步骤创建电商项目A 安装Vue脚手架B 通过脚手架创建项目C 配置路由D 配置Element UI 在插件中安装 搜索vue cli plugin elementE 配置Axios 在依赖中安装 搜索axios 运行依赖 5分钟 2 1前端项目初始化 案例 初始化电商项目 了解如何创建和配置SSH公钥 要点提示 项目初始化 创建码云账号并配置SSH公钥 掌握程度 了解 2 2创建码云账号并配置SSH公钥 了解整个项目如何托管到码云 要点提示 项目初始化 将本地项目托管到码云中 掌握程度 了解 2 3将本地项目托管到码云中 练习 将项目托管到码云 提示 按照步骤创建电商项目A 注册码云账号B 创建SSH公钥C 在码云中配置SSH公钥D 在码云中新建仓库E 将本地项目代码和码云仓库进行关联 5分钟 2 3将本地项目托管到码云中 案例 将电商项目托管到码云 了解如何安装phpStudy以及导入mysql 要点提示 项目初始化 安装MySQL 掌握程度 掌握 2 4安装MySQL 了解使用postman发送请求调试接口 要点提示 项目初始化 配置API接口服务器并使用PostMan调试接口 掌握程度 了解 2 5配置API接口服务器并使用PostMan调试接口 练习 安装phpStudy以及mysql运行vue api server 并使用postman调试接口 提示 按照步骤完成练习A 安装phpStudy 导入mysql数据库B 打开vue api server 安装依赖项C 使用postman发送请求调试接口 5分钟 2 5配置API接口服务器并使用PostMan调试接口 案例 调试后台接口服务器 Contents 目 录 电商项目概述电商项目准备工作电商项目登录功能电商项目登出功能将开发的代码提交到码云 理解项目登录过程 要点提示 登录退出 分析登录过程以及token的原理 掌握程度 掌握 3 1分析登录过程以及token的原理 了解登录页面的结构 要点提示 登录退出 分析登录页面的布局结构并创建login子分支 掌握程度 掌握 3 2分析登录页面的布局结构并创建login子分支 理解项目要如何进行清理更改 要点提示 登录退出 梳理项目结构 掌握程度 了解 3 3梳理项目结构 练习 创建login分支更改项目初始结构 提示 按照步骤完成练习A 添加并切换到login分支B 更改main jsC 更改App vueD 更改router jsE 删除components中的vue组件 5分钟 3 3梳理项目结构 案例 更改项目初始结构 了解如何设置router js来设置Login组件以及重定向 要点提示 登录退出 渲染Login组件并实现路由重定向 掌握程度 掌握 3 4渲染Login组件并实现路由重定向 了解如何绘制登录盒子 要点提示 登录退出 设置背景色并在屏幕中央绘制登录盒子 掌握程度 掌握 3 5设置背景色并在屏幕中央绘制登录盒子 了解如何绘制头像信息 要点提示 登录退出 绘制默认头像 掌握程度 掌握 3 6绘制默认头像 了解如何绘制表单区域 要点提示 登录退出 绘制登录表单区域 掌握程度 掌握 3 7绘制登录表单区域 了解如何给文本框添加图标 要点提示 登录退出 绘制带icon的input输入框 掌握程度 了解 3 8绘制带icon的input输入框 练习 绘制电商项目登录页 提示 按照步骤完成练习A 绘制登录页面结构 样式B 绘制页面头像C 绘制页面表单结构 5分钟 3 8绘制带icon的input输入框 案例 绘制项目登录页 上午复习 Vue第七天 上午复习 确定当前项目状态的git命令是 硬前端路由件创建分支的命令是硬前端路由件 查看分支的命令是硬前端路由件 在element ui组件中添加硬前端路由件 可以设置文本框图标 上午复习 Vue第七天 上午复习 确定当前项目状态的git命令是 gitstatus前端路由件创建分支的命令是硬gitcheckout b分支名 查看分支的命令是硬gitbranch 在element ui组件中添加硬prefix icon iconfonticon user 可以设置文本框图标 了解如何对表单中的文本框进行数据绑定 要点提示 登录退出 实现表单的数据绑定 掌握程度 掌握 3 9实现表单的数据绑定 了解如何对表单进行数据验证 要点提示 登录退出 实现表单数据验证 掌握程度 掌握 3 10实现表单数据验证 了解如何重置表单 要点提示 登录退出 实现表单的重置功能 掌握程度 了解 3 11实现表单的重置功能 练习 添加登录页面的数据绑定 数据验证 数据重置 提示 按照步骤完成练习A 添加登录页面的数据绑定B 通过rules添加登录页面的数据绑定C 通过resetFields添加登录页面的数据重置 5分钟 3 11实现表单的重置功能 案例 添加登录页面的数据操作 理解用户点击登录之前必须先对表单数据进行校验 要点提示 登录退出 实现登录前表单数据的预验证 掌握程度 掌握 3 12实现登录前表单数据的预验证 了解如何配置axios了解如何使用axios发送请求 要点提示 登录退出 配置axios发起登录请求 掌握程度 掌握 3 13配置axios发起登录请求 了解如何配置弹窗组件了解如何进行弹窗操作 要点提示 登录退出 配置Message全局弹框组件 掌握程度 了解 3 14配置Message全局弹框组件 练习 添加登录页面的登录前验证添加登录页面的请求操作 请求之后的提示 提示 按照步骤完成练习A 通过this refs LoginFormRef validate进行表单验证B 通过axios发送请求C 添加请求之后的提示 5分钟 3 14配置Message全局弹框组件 案例 完成登录页面的请求操作 Contents 目 录 电商项目概述电商项目准备工作电商项目登录功能电商项目登出功能将开发的代码提交到码云 了解登录以后要做的事情了解Home vue组件的基本内容 要点提示 登录退出 完善登录之后的操作 掌握程度 掌握 4 1完善登录之后的操作 了解如何配置路由守卫 要点提示 登录退出 路由导航守卫控制页面访问权限 掌握程度 掌握 4 2路由导航守卫控制页面访问权限 了解退出功能其实是通过删除sessionStorage来完成的 要点提示 登录退出 实现退出功能 掌握程度 了解 4 3实现退出功能 练习 完成退出功能添加路由守卫 提示 按照步骤完成练习A 添加Home vue以及登录成功之后跳转的操作B 通过router beforeEach添加路由守卫C 通过sessionStorage的清除添加退出功能 5分钟 4 3实现退出功能 案例 完成退出功能 Contents 目 录 电商项目概述电商项目准备工作电商项目登录功能电商项目登出功能将开发的代码提交到码云 了解ESLint为什么会报错了解解决ESLint报错的解决方案 要点提示 语法处理 处理项目中的ESLint语法报错问题 掌握程度 掌握 5 1处理项目中的ESLint语法报错问题 了解如何优化element ui的按需导入代码 要点提示 语法处理 修改element ui组件的按需导入形式 掌握程度 掌握 5 2修改element ui组件的按需导入形式 了解将本地代码提交到码云 要点提示 登录退出 将本地代码提交代码到码云中 掌握程度 了解 5 3将本地代码提交代码到码云中 练习 处理ESLint报错问题 优化element ui导入代码将编写好的本地代码提交到码云 提示 按照步骤完成练习A 通过添加 prettierrc文件处理ESLint报错问题B 更改element js优化导入代码C 使用git命令将本地代码提交并上传到码云 5分钟 5 3将本地代码提交代码到码云中 案例 将本地代码提交到码云 今日复习 确定当前项目状态的git命令是 硬前端路由件创建分支的命令是硬前端路由件 查看分支的命令是硬前端路由件 在element ui组件中添加硬前端路由件 可以设置文本框图标通过配置硬前端路由件 数组可以设置表单数据验证规则通过编写硬前端路由件 可以进行路由守卫合并分支的命令是硬前端路由件 将本地代码推送到码云的命令是硬前端路由件 Vue第七天 今日复习 今日复习 确定当前项目状态的git命令是 gitstatus前端路由件创建分支的命令是硬gitcheckout b分支名 查看分支的命令是硬gitbranch 在element ui组件中添加硬prefix icon iconfonticon user 可以设置文本框图标通过配置硬 ru