黑马后台三-登录和退出功能

目录

一、登录流程

二、登录业务的相关技术点

通过cookie在客户端记录状态（在node阶段学习，这里后面去补）

三、token是如何维持状态的

 四、登录功能的实现

1、梳理APP根组件

---

一、登录流程

在登录页面输入用户名和密码

调用后台接口进行验证

通过验证之后，根据后台的响应状态跳转到项目主页

二、登录业务的相关技术点

http是无状态的

通过cookie在客户端记录状态（在node阶段学习，这里后面去补）

通过session在服务器端记录状态

通过token方式维持状态

如果前端和服务器之间不存在跨域问题，推荐使用cookie和session，如果存在跨域问题，使用token来维持登录状态。

三、token是如何维持状态的

原理分析

token对用户进行身份校验，如果存在，就证明用户已经登录了，是用户登录成功后的唯一身份令牌

 四、登录功能的实现

（1）使用element-UI组件实现布局

        el-from:整个登录框是一个表单

        el-from-item，用户名和密码，登录和重置按钮

        el-input,输入框

        字体图标

（2）打开工作区，运行项目

运行git status ,看工作区是否干净，是一个干净的工作目录，

在开发新功能之前，放在一个新的分支上进行开发，然后合并到之后的分支上

创建分支：git checkout -b login 

创建了一个子分支login，并通过checkout切换到了新的分支上

查看当前项目的所有分支：git branch

（3）查看项目的运行效果

运行报错：Uncaught TypeError: Cannot read properties of undefined (reading 'use')

问题原因vue3+router4的版本(主要是router4)不再使用use来引入vueRouter

照这个修改了

router/index.js文件夹： 
import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
const routes=[
 //这里和vue2一样
]
const router = createRouter({
    history: routerHistory,
 routes
})
export default router

main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
 
const app = createApp(App)
app.use(router)
app.mount('#app')

运行发现

尾随空格报错

终端执行npm run lint -- --fix 

运行成功

目前页面中是有图标的，那么如何让他变成空白页

1、梳理APP根组件

把app.vue中的内容删除为

<template>

  <div id="app">

  </div>

</template>

<script>

export default {

  name: 'app'

}

</script>

<style>

</style>

2、梳理路由组件

vue3+router4跟视频里的不一致，一直报错，打算重新安装手脚架