使用Vue.js和Vuex构建登录功能

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何使用Vue.js和Vuex构建登录功能。该项目旨在帮助你理解Vue.js组件与基于Vuex的状态管理系统的集成。

👀 预览

Vue登录功能预览

🎯 任务

在这个项目中,你将学习:

  • 如何理解项目结构以及每个文件的作用
  • 如何识别登录功能中的问题
  • 如何通过修改Vuex存储和Vue组件来修复登录功能

🏆 成果

完成这个项目后,你将能够:

  • 理解如何使用Vuex构建Vue.js项目的结构
  • 应用Vuex来管理应用程序状态
  • 排查和修复Vue.js应用程序中的问题
  • 将Vuex与Vue.js组件集成

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/templating("`HTML Templating`") subgraph Lab Skills html/head_elems -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/layout -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/forms -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/form_valid -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/form_access -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/inter_elems -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/templating -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} end

了解项目结构

在这一步中,你将了解项目结构以及登录功能所涉及的文件。

项目目录结构如下:

├── components
│   ├── login.js
│   └── panel.js
├── css
│   └── style.css
├── index.html
├── lib
│   ├── vue.min.js
│   └── vuex.min.js
└── store
    ├── BaseModule.js
    ├── UserModule.js
    └── index.js

关键文件及其作用如下:

  1. index.html:这是主要的HTML文件,是应用程序的入口点。
  2. components/login.js:此文件包含登录页面的Vue组件。
  3. components/panel.js:此文件包含欢迎面板的Vue组件。
  4. store/BaseModule.js:此文件定义了基础的Vuex模块。
  5. store/UserModule.js:此文件定义了与用户相关的数据和操作的Vuex模块。
  6. store/index.js:此文件合并Vuex模块并创建Vuex存储。

点击WebIDE右下角的“Go Live”按钮来运行项目。

接下来,在VM顶部打开“Web 8080”并手动刷新以查看页面,初始页面如下:

初始效果

识别问题

问题在于登录功能未按预期工作。输入用户名并点击“确认”按钮后,数据发生了变化,但登录页面仍显示,欢迎页面未正确显示。

为了识别问题,你需要仔细阅读store文件夹中的相关代码,特别是UserModule.js文件,并结合你对Vuex的了解。

修复登录功能

  1. 打开index.html文件,在<script>标签中找到TODO部分。

  2. computed部分,修改为以下属性:

    computed: {
      welcome() {
        return store.getters.welcome;
      },
      username() {
        return store.getters["user/username"];
      },
      token() {
        return store.getters["user/token"];
      }
    },

    这些计算属性将允许你从Vuex存储中访问必要的数据。

  3. methods部分,将login方法更新如下:

    methods: {
      login(username) {
        if (username) {
          store.commit("user/login", {
            username,
            token: "sxgWKnLADfS8hUxbiMWyb"
          });
          store.commit("say", "Logged in successfully, welcome back!");
        }
      }
    }

    这个更新后的login方法将向Vuex存储提交必要的操作,以更新用户的登录状态并显示欢迎消息。

测试登录功能

  1. 将对index.html文件所做的更改保存。
  2. 在浏览器中刷新网页。
  3. 输入用户名“admin”,然后点击“确认”按钮。
  4. 此时你应该会看到显示出欢迎面板,如“完成效果”图片所示。
完成效果

恭喜!你已成功修复登录功能并对代码进行了必要的修改。

✨ 查看解决方案并练习

总结

恭喜!你已完成此项目。你可以在LabEx中练习更多实验以提升你的技能。

您可能感兴趣的其他 HTML 教程