前端框架使用vue-cli（ 第四层：业务源码层--登陆页相关）

前端框架使用 Vue-CLI

第四层：业务源码层 ------ 登录页相关

简介

前面的章节，我们已经分析了：

• 环境依赖层
• 工程配置层
• 插件配置层

从这一章节开始：

我们正式进入：

Vue-CLI 工程中的业务源码层。

这一层开始，项目已经不再是：

• webpack 配置
• vue.config.js
• 插件安装

而是真正开始进入：

"页面业务开发"。

而登录页：

通常就是一个后台管理系统的第一个业务页面。

因此：

登录页非常适合作为：

理解 Vue 企业级开发的入门案例。

---

一、登录页在整个系统中的作用

登录页本质上承担几个核心职责：

1. 用户输入账号密码
2. 前端进行表单校验
3. 调用后端登录接口
4. 获取 token
5. 保存用户状态
6. 跳转首页
7. 初始化权限菜单

因此：

登录页实际上会涉及：

• Vue 页面开发
• ElementUI 表单
• Vue 数据绑定
• axios 请求
• Vuex 状态管理
• Router 页面跳转
• Token 持久化
• 权限初始化

所以：

登录页几乎是 Vue 企业级项目的缩影。

---

二、登录页所在的位置

一般 Vue-CLI 后台项目：

登录页通常位于：

src/views/login/index.vue

例如：

src
 ├── views
 │    ├── login
 │    │     └── index.vue

这里：

• views → 页面级组件
• login → 登录模块
• index.vue → 登录页面

这里体现了：

Vue 项目模块化的目录思想。

---

三、登录页本质上仍然是 Vue 组件

例如：

<template>
  <div class="login-container">

  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

登录页虽然是"业务页面"。

但本质上：

它仍然是一个 Vue 组件。

因此：

它依然遵循：

• template
• script
• style

三层结构。

---

四、登录页面结构分析

通常登录页会包含：

LoginPage
 ├── Logo区域
 ├── 登录表单
 │     ├── 用户名
 │     ├── 密码
 │     └── 登录按钮
 └── 背景区域

例如：

<template>
  <div class="login-container">

    <div class="login-form">

      <el-input v-model="loginForm.username" />

      <el-input
        v-model="loginForm.password"
        type="password"
      />

      <el-button @click="handleLogin">
        登录
      </el-button>

    </div>

  </div>
</template>

这里涉及：

---

1. v-model 双向绑定

例如：

v-model="loginForm.username"

作用：

输入框 ←→ Vue数据

用户输入内容时：

Vue 的数据会自动变化。

---

2. 点击事件

例如：

@click="handleLogin"

作用：

按钮点击 → 调用 methods 方法

---

五、登录页的数据结构

例如：

data() {
  return {

    loginForm: {
      username: '',
      password: ''
    }

  }
}

这里：

loginForm
 ├── username
 └── password

本质上：

就是整个登录表单的数据模型。

Vue 会通过响应式机制：

实时同步页面与数据。

---

六、登录逻辑分析

登录最核心的方法：

methods: {

  handleLogin() {

  }

}

这个函数通常负责：

1. 校验表单
2. 调用接口
3. 保存token
4. 页面跳转

---

七、调用后端接口

例如：

import { login } from '@/api/user'

这里：

@  → src目录

实际对应：

src/api/user.js

例如：

export function login(data) {

  return request({
    url: '/login',
    method: 'post',
    data
  })

}

这里体现了：

Vue 页面 与 JS 模块协作的思想。

---

八、Token 保存机制

登录成功后：

后端通常会返回：

{
  "token": "xxxx"
}

前端会保存：

setToken(token)

通常会保存到：

Cookie
LocalStorage
SessionStorage

作用：

后续请求携带用户身份

---

九、Vuex 状态管理参与

大型项目中：

用户信息通常不会只保存在页面。

而会进入：

Vuex

例如：

dispatch('user/login')

流程：

Login.vue
   ↓
Vuex Action
   ↓
API请求
   ↓
保存Token
   ↓
返回结果

这里体现了：

Vue 企业级项目的数据集中管理思想。

---

十、登录成功后的页面跳转

例如：

this.$router.push('/')

作用：

登录成功 → 跳转首页

这里：

$router

就是：

Vue-Router 提供的路由对象。

---

十一、登录页涉及的核心技术栈

登录页虽然简单。

但其实已经包含：

Vue
Vue-Router
Vuex
ElementUI
Axios
Cookie
JS模块化
权限体系
接口请求

因此：

学会登录页，实际上已经进入 Vue 企业级开发。

---

十二、登录页在 Vue-CLI 中的意义

登录页的真正意义：

并不仅仅是：

"输入账号密码"。

而是：

通过登录页，把整个前端工程体系串联起来。

因为：

登录页会同时连接：

页面层
组件层
路由层
接口层
状态层
权限层
存储层

所以：

登录页是：

Vue 企业级开发最经典的入门案例。