前端开发-Vue-element 电商管理系统

2024-06-21 08:22:35

Vue-element 电商管理系统

1 介绍了解项目实战的学习目标
2 电商项目基本业务概述
3 后台管理系统功能划分
4 项目开发模式技术选型
5 项目初始化
- 可视化面板配置
6 配置码云SSH
7 托管云
8 安装mysql
9 API服务器Postman调试
10 分析登陆和token原理
11 登陆页面子分支
12 登陆退出项目结构
13 渲染Login组件路由重定向
14 绘制登录盒子
15 绘制默认头像
16 绘制登录表单区域
17 绘制带icon的input
18 实现表单的数据绑定
19 实现表单数据验证
20 表单的重置
21 登录前表单预验证
22 登录退出-配置axios发起登录请求
23 登录退出-配置Message全局弹框组件
24 登录退出-完善登录之后的操作
25 登录退出-路由导航守卫控制页面访问权限
26.登录退出-实现退出功能
27 语法处理-处理项目中的ESLint语法报错问题
28 语法处理-修改element-ui组件的按需导入形式
29 登录退出-将本地代码提交代码到码云中
30 主页-实现基本的主页布局
31 主页-美化主页的header区域
32 主页-实现导航菜单的基本结构
- 引入之后注册为全局组件
33 主页-通过axios拦截器添加token验证
- axios 屬性有一個 request 的成員請求攔截器
- 在 axios 挂載之前插入攔截器
34

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

前端开发-Vue-element 电商管理系统相关推荐

开发一套电商管理系统需要具备哪些功能？
开发一套**电商管理系统**需要具备哪些功能? 1.订单管理:支持录入订单.编辑订单.自动审批等基本操作,还支持对接第三方管理系统,从而数据的调动,资源整合,提高效率. 2.商品管理:全面精细化记录商 ...
前端学习（1886）vue之电商管理系统电商系统之首页路由的重定向主页侧边栏路由链接的改造
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1885）vue之电商管理系统电商系统之首页路由的重定向
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1884）vue之电商管理系统电商系统之实现侧边栏的折叠和展开
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1883）vue之电商管理系统电商系统之每次只能打开一个菜单项并解决边框问题
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1882）vue之电商管理系统电商系统之设置字体颜色并添加标签
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1881）vue之电商管理系统电商系统之双层for循环渲染数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1880）vue之电商管理系统电商系统之获取左侧菜单数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1879）vue之电商管理系统电商系统之通过axios拦截器添加token认证
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1878）vue之电商管理系统电商系统之左侧菜单布局
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

最新文章

热门文章