准备知识

开发一个后台登陆模块，需要使用到以下知识点：

父组件 + 子组件 LoginForm + 事件传递 + 登录成功后隐藏表单

什么是组件？

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成一个层层嵌套的树状结构：

$emit 就是“喊人 + 递东西”

在 Vue 里：

• 子组件（LoginForm 登录框）
• 相当于 你
• 父组件（外面的页面）
• 相当于 父亲

this.$emit('xxx', 数据)

翻译成人话：

我（子组件）喊一声：xxx 事件发生啦！顺便把这个 “数据” 递给你（父组件）！

1. 父组件（App.vue 或主页）

这里就是使用 LoginForm 的地方

vue

[xss_clean]// 引入登录组件import LoginForm from './components/LoginForm.vue'export default {  components: {    LoginForm  },  data() {    return {      // 用户信息，null 代表未登录      user: null    }  },  methods: {    // 登录成功后执行的方法    onLoginSuccess(userInfo) {      // 把子组件传过来的用户信息存起来      this.user = userInfo      // 存到本地，刷新页面也保持登录      localStorage.setItem('user', JSON.stringify(userInfo))    }  },  // 页面刷新时自动读取登录状态  created() {    const localUser = localStorage.getItem('user')    if (localUser) {      this.user = JSON.parse(localUser)    }  }}[xss_clean]

2. 子组件 LoginForm.vue

放在 src/components/LoginForm.vue

vue

[xss_clean]import request from '../utils/axios'export default {  name: 'LoginForm',  data() {    return {      username: '',      password: '',      isLoading: false,      isLoggedIn: false,      message: ''    }  },  methods: {    async handleLogin() {      this.message = ''      if (!this.username || !this.password) {        this.message = '用户名和密码不能为空。'        this.isLoggedIn = false        return      }      this.isLoading = true      request.post('/user/login', {        username: this.username,        password: this.password      }).then(response => {        // 这里应根据实际 API 返回结构进行处理        if (response.data.success) {          const token = response.data.data.token || ''          this.isLoggedIn = true          this.message = '登录成功！欢迎回来：' + this.username          const user= {          username: response.data.data.userName,          nickname: response.data.data.name        }          localStorage.setItem('user', JSON.stringify(user))          if (token) {            localStorage.setItem('token', token)          }          console.log('登录成功，token:', JSON.stringify(user))          this.$emit('login-success', user)        } else {          this.isLoggedIn = false          this.message = response.data.message || '登录失败，请重试。'        }      }).catch(error => {        console.error('登录请求失败:', error)        this.isLoggedIn = false        this.message = '网络错误，请稍后再试。'      }).finally(() => {        this.isLoading = false      })    }  }}[xss_clean]

3. 现在完整逻辑你彻底懂了

1. 一开始 user: null → 显示
2. 你在子组件点登录
3. 子组件执行：
4. js
5. this.$emit('login-success', 用户信息)
6. 父组件监听 @login-success，执行 onLoginSuccess
7. 父组件把 user 赋值 → v-if="!user" 不成立 → 登录框消失
8. 显示欢迎页面

4. 你那行代码的终极解释

vue

  @login-success="onLoginSuccess"  <!-- 登录成功 → 执行父组件方法 -->/>

就是：

没登录就显示登录，登录成功就告诉父组件更新用户状态，然后登录框自动消失。

5.请求拦截器

在 src/utils/axios.js 文件如下，每次发送请求，携带token 信息

import axios from 'axios'const service = axios.create({  baseURL: '/admin', // 走 proxy  timeout: 8000})service.interceptors.request.use(config => {  console.log('Request Interceptor:', config.baseURL + config.url)  if(config.url !== '/user/login') {      const token = localStorage.getItem('token')     if (token)  {      config.headers.Authorization = `Bearer ${token}`     }}  return config})export default service

6.vue.config.js文件

// vue.config.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({  transpileDependencies: true,  // 5. 开发服务器配置  devServer: {    open: true, // 自动打开浏览器    port: 8080, // 端口号    https: false, // 是否开启https    hot: true, // 热更新    // ✅ 跨域代理（最常用）    proxy: {      '/admin': {        target: 'http://127.0.0.1:8899', // 后端接口地址        changeOrigin: true, // 允许跨域        pathRewrite: { '^/admin': '/admin' } // 重写路径，去掉 /admin 前缀      }    }  }})

好了，一个简单的VUE登陆模块就开发完了，我们运行看看效果吧？