[JavaScript知识库]前端开发-Vue-element 电商管理系统

1 介绍了解 项目实战的学习目标

https://www.bilibili.com/video/BV1EE411B7SU?from=search&seid=7140184691542384079

https://www.bilibili.com/video/BV1T7411J7Rc?from=search&seid=4971153032007623168

2 电商项目基本业务概述

3 后台管理系统功能划分

4 项目开发模式技术选型

SPA单页面 程序

单页Web应用(single page web application,SPA):

AJAX

JWT 状态 保持

5 项目初始化

可视化面板 配置

6 配置码云SSH

7 托管云

8 安装mysql

9 API服务器Postman调试

cls 清屏

token cookie session 状态保持机制

10 分析登陆和token原理

vue + Node

不存在跨域 用cookie 和 session

11 登陆页面子分支

绘制页面

查看 工作区 是否干净

开发新功能 建立一个分支

开发完 后 再 合并 到 master 主分支

*处于 在哪个 分支

12 登陆退出 项目结构

导入了 根组件

路由

element组件

new一个实例

通过render函数 把app 根组件 渲染到了 页面上

也把 路由 挂载在了 new 实例

template ui结构

script 行为

style 样式

梳理一下

梳理路由

默认导入 home.vue

基本路由规则

13 渲染Login组件路由重定向

新建一个 单文件 组件

scoped 组件 样式 区间

路由形式 渲染到 app 根组件

导入

新增路由规则

14 绘制登录盒子

类选择器

15 绘制默认头像

16 绘制登录表单区域

按需导入

全局 注册

17 绘制带icon的input

18 实现表单的数据绑定

值 绑定 数据源

双向绑定

19 实现表单数据验证

鼠标 离开文本框

立即 对 合法性 进行校验

属性绑定 值 是一个 验证规则 对象

数组 每一个 对象 都是 验证规则

20 表单的重置

this 指向 当前组件 的 实例对象

21 登录前表单预验证

拿到 表单 引用 找到 对象

从validate 函数 的 回调函数 获取验证结果

匿名 箭头函数

形参 布尔值

22 登录退出-配置axios发起登录请求

全局 配置 axios

包挂载到 vue 原型对象 上



使用 原型中 的 $http 成员

返回 primise 可用 async 和 await（中能用在 异步async方法中 ） 简优化操作

解构 数据 重命名 res

23 登录退出-配置Message全局弹框组件

全局挂载在vue 原型组件 配置 为 $message 自定义属性

用 this 访问 $message 属性

24 登录退出-完善登录之后的操作

会话存储机制 sessionstorage
持久存储机制 localstorage

scoped 防止 样式 冲突

25 登录退出-路由导航守卫控制页面访问权限

26.登录退出-实现退出功能

27 语法处理-处理项目中的ESLint语法报错问题

ESlint标准语法规范
配置文件 告诉 如何格式化 代码





分好 单引号 格式方式



禁用 语法规则

28 语法处理-修改element-ui组件的按需导入形式

29 登录退出-将本地代码提交代码到码云中

代码 同步 上传

Ctrl + 反引号 ` 打开终端

修改

新增

分支

合并

切换到 master 主分支

远程推送 到 码云

30 主页-实现基本的主页布局

布局容器
header 头部容器
侧边栏 容器

没有 导入 组件

use 全局注册

31 主页-美化主页的header区域

32 主页-实现导航菜单的基本结构

el - menu 容器

el-submenu 一级菜单

el - menu - item 二级菜单

引入之后 注册为 全局组件

33 主页-通过axios拦截器添加token验证

axios 屬性 有一個 request 的 成員 請求攔截器

use函數 挂載 一個 回調 函數

在 axios 挂載之前 插入 攔截器

34