vue cli实现项目登陆页面流程详解

下面是“Vue CLI实现项目登录页面流程详解”的完整攻略：

准备工作

首先，安装 Vue CLI，可以通过 npm 命令在终端进行安装：

npm install -g @vue/cli

安装完成后，通过 Vue CLI 创建一个新项目：

vue create my-project

然后，进入项目目录并启动项目：

cd my-project
npm run serve

在本地服务器上，就可以看到 Vue 的欢迎界面了。

编写登录页面组件

接下来，我们需要创建一个登录页面组件。在项目文件夹里创建一个名为 Login.vue 的文件，并添加以下代码：

<template>
  <div class="login">
    <h1>登录</h1>
    <form>
      <div>
        <label>用户名:</label>
        <input type="text" v-model="username" />
      </div>
      <div>
        <label>密码:</label>
        <input type="password" v-model="password" />
      </div>
      <button type="button" @click="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      // 登录逻辑代码
    },
  },
};
</script>

<style>
.login {
  background-color: #f0f0f0;
  padding: 20px;
  width: 300px;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
form div {
  margin-bottom: 10px;
}
label {
  display: inline-block;
  width: 80px;
}
input {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  outline: none;
  width: 200px;
}
button {
  margin-top: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

该组件包含一个登录表单，其中包括用户名和密码输入框以及“登录”按钮。此时还没有完整的登录逻辑，后面会进行实现。

创建全局路由和路由守卫

接下来，我们需要通过 Vue Router 创建全局路由，在 src 目录下的 router.js 文件中添加以下代码：

import Vue from "vue";
import Router from "vue-router";
import Login from "@/views/Login";

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: "/login",
      name: "login",
      component: Login,
    },
  ],
});

router.beforeEach((to, from, next) => {
  // 判断用户是否已经登录
  if (to.name !== "login" && !localStorage.getItem("token")) {
    next("/login");
  } else {
    next();
  }
});

export default router;

该路由的核心在于路由守卫（beforeEach）函数。它会在用户进入每个路由之前执行一段代码，用以判断用户是否登录。如果没有登录，则会跳转到登录页；如果已经登录，则会直接进入到对应的页面。

实现登录逻辑

实现登录逻辑的关键在于如何存储用户登录状态。这里我们通过使用 localStorage 来实现。在 Login.vue 中的 login 方法中添加以下代码：

login() {
  // 发起登录请求
  const username = this.username;
  const password = this.password;
  axios
    .post("/api/login", { username, password })
    .then((res) => {
      // 登录成功，保存 token 到本地存储
      localStorage.setItem("token", res.data.token);

      // 跳转到首页
      this.$router.push("/");
    })
    .catch((err) => {
      alert("用户名或密码错误");
    });
}

在用户成功登录后，我们通过调用 localStorage.setItem 方法将 token 存储到本地存储中。token 在后面的路由守卫中进行判断，以判断用户是否登录。

示例说明

我们可以通过 Vue CLI 创建一个空的项目，然后按照上述步骤添加以下文件：

• src/views/Login.vue
• src/router.js

完成以上工作后，运行项目即可看到登录页面。这里我们提供一个示例项目（使用的是 Element UI）：

• vue-login-example

以上就是 Vue CLI 实现项目登录页面流程详解的完整攻略。