笔记3：登录/退出流程【Vue实战项目：电商管理系统（Element-UI）】

1 登录概述

1.1 登录业务流程

1. 在登录页面输入用户名和密码
2. 调用后台接口进行验证
3. 通过验证后，根据后台的响应状态跳转到项目主页

1.2 登录业务的相关技术点

1. http是无状态的
2. 通过cookie在客户端记录状态
3. 通过session在服务端记录状态
4. 通过token方式维持状态

2 token原理分析

3.1 创建分支

git checkout -b login

3.2 删除初始项目不必要的文件

• App.vue

<template>
  <div id="app">
     hello vue
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>

</style>

• router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
   
  routes
})

export default router

• 删除views/Home.vue, views/About.vue, components/HelloWorld.vue

刷新页面后：

3.3 创建登录组件

3.3.1 创建登录页面

• 创建登录页：/components/Login.vue

<template>
    <div>
        登录组件
    </div>
</template>

<script>
export default {
   };
</script>

<style lang="less" scoped>

</style>

• 设置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:'/', redirect: '/login'},
  {
    path:'/login', component:Login}
]

const router = new VueRouter({
   
  routes
})

export default router

• 设置路由占位符
  修改App.vue：

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

设置完成后，访问http://localhost:8080/#和http://localhost:8080/#/login均能跳转到Login页面

3.3.2 创建登录页面底色

• Login.vue

<template>
  <div class="login_container">
  </div>
</template>

<style lang="less" scoped>
.login_container {
   
  background-color: #2b4b6b;
  height: 100%;
}

• 创建全局样式css文件
  …/assets/css/global.css

html,
body,
#app {
   
  height: 100%;
  margin: 0;
  padding: 0;
}

• 导入全局样式
  main.js

import './assets/css/global.css'

3.3.3 创建登录框底色

• Login.vue

<template>
  <div class="login_container">
    <div class="login_box"></div>
  </div>
</template>

<style lang="less" scoped>
.login_container {
   
  background-color: