写在前面

这是我跟着黑马程序员的Vue全家桶-项目实战教程写的一篇笔记，主要记录思路，内容不完整，这里只写到了用户列表管理，进来的友友们可以根据目录，看是否有自己需要的功能

这篇笔记记录的是基础vue内容，没有涉及到组件化开发，距离实际开发有一定的距离，但是可以了解vue的基本使用，登录/登出功能、菜单动态渲染、列表数据渲染等实现思路，对初学者比较友好

想跟着写完整项目的友友们慎入呀！！！

项目源码在码云上

今天完成的是登录/登出功能，其他功能将持续更新
在这里插入图片描述

Vue全家桶-项目实战

能够基于Vue初始化项目
能够基于Vue技术栈进行项目开发
能够使用Vue的第三方组件进行项目开发心
能够说出前后端分离的开发模式

1.项目概述

1.1电商项目基本业务概述

根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式。
在这里插入图片描述

1.2电商后台管理系统的功能

电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。
在这里插入图片描述

1.3电商后台管理系统的开发模式(前后端分离)

电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于Vue技术栈的SPA项目。
在这里插入图片描述

1.4电商后台管理系统的技术选型

1.前端项目技术栈

vue
vue-router
Element-UI
Axios
Echarts

2.后端项目技术栈

Node.js
Express
Jwt
mysql
sequelize

2.项目初始化

2.1前端项目初始化步骤

安装vue 脚手架
通过vue 脚手架创建项目配置vue 路由
配置Element-UI组件库
配置axios库
初始化 git远程仓库
将本地项目托管到Github或码云中

创建项目

在这里插入图片描述

添加插件

在这里插入图片描述

安装依赖

在这里插入图片描述

使用码云

地址：https://gitee.com/

在这里插入图片描述

2.2后台项目的环境安装配置

安装 MySQL数据库
安装 Node.js环境配置项目相关信息
启动项目
使用Postman测试后台项目接口是否正常

3.登录/退出功能

3.1登录概述

登录业务流程
- 在登录页面输入用户名和密码
- 调用后台接口进行验证
- 通过验证之后，根据后台的响应状态跳转到项目主页
登录业务的相关技术点
- http是无状态的
- 通过cookie在客户端记录状态
- 通过session在服务器端记录状态
- 通过token方式维持状态（存在跨域问题）

3.2登录一token原理分析

在这里插入图片描述

3.3登录功能实现

1.登录页面的布局

通过Element-Ul组件实现布局

在这里插入图片描述

el-form
el-form-item
el-input
el-button
字体图标

打开项目，查看本地仓库情况，写一个功能，创建一个分支，完成所有功能后，在合并到主分支上

在这里插入图片描述

删除不要的组件

在这里插入图片描述

梳理根组件

在这里插入图片描述

梳理路由

在这里插入图片描述

2.创建登录组件

创建登录组件文件
添加路由规则
放置路由占位符：通过路由匹配到的组件都会被渲染到路由占位符里进行展示
路由重定向，如果访问根路径，自动跳转到login页面

3.登录组件布局

1.安装依赖，重启运行
在这里插入图片描述

在这里插入图片描述

创建全局样式
在入口文件main.js中导入全局样式表，字体图标
登录组件样式
按需导入，全局注册组件
登录组件表单的数据绑定
登录组件表单的数据验证
登录组件实现表单的重置
登录前的预校验：发起网路请求前先对表单数据进行校验，通过才可以发起请求，否则提示用户，信息不合法
导入axios，根据预验证是否发起请求
设置登录弹窗提示
登录成功后的行为
1. 将登录成功之后的 token，保存到客户端的sessionStorage（会话期间的存储机制）中
  - 项目中除了登录之外的其他API接口，必须在登录之后才能访问
  - token只应在当前网站打开期间生效，所以将 token保存在 sessionStorage中
2. 通过编程式导航跳转到后台主页，路由地址是/home
路由导航守卫控制访问权限：如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。