vue创建登陆页面一直加载状态，无法点开注册？

阅读提示：本文共计约20056个文字，预计阅读时间需要大约55分钟，由作者免费电影网站在线观看编辑整理创作于2023年11月06日19时34分01秒。

在Vue.js中，我们可以通过以下步骤来实现登录页面的持续加载以及注册功能。

1. 安装axios库（用于发送HTTP请求）和vue-router（用于处理页面跳转）。

npm install axios vue-router

2. 在main.js文件中引入vue-router并设置路由。

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入路由配置文件
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3. 创建router/index.js文件来配置路由。

const routes = [
  { path: '/', name: 'login', component: () => import('@/views/Login.vue') }, // 登录页面
  { path: '/register', name: 'register', component: () => import('@/views/Register.vue') } // 注册页面
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4. 创建登录页面（Login.vue）。

<template>
  <div class="login">
    <h1>登录</h1>
    <p v-if="isLoading">正在加载...</p>
    <form @submit.prevent="login">
      <input type="text" placeholder="用户名" v-model="username">
      <input type="password" placeholder="密码" v-model="password">
      <button type="submit">登录</button>
    </form>
    <p><a href="/register">注册</a></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      isLoading: false
    }
  },
  methods: {
    async login() {
      this.isLoading = true;
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        if (response.status === 200) {
          this.$router.push({ name: 'home' });
        } else {
          alert('登录失败，请重试！');
        }
      } catch (error) {
        alert('登录失败，请重试！');
      } <365>finally {
        this.isLoading = false;
      }
    }
  }
};
</script>

5. 创建注册页面（Register.vue）。

<template>
  <div class="register">
    <h1>注册</h1>
    <p v-if="isLoading">正在加载...</p>
    <form @submit.prevent="register">
      <input type="text" placeholder="用户名" v-model="username">
      <input type="password" placeholder="密码" v-model="password">
      <input type="password" placeholder="确认密码" v-model="confirmPassword">
      <button type="submit">注册</button>
    </form>
    <p><a href="/login">登录</a></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      isLoading: false
    }
  },
  methods: {
    async register() {
      this.isLoading = true;
      try {
        const response = await axios.post('/api/register', {
          username: this.username,
          password: this.password,
          confirmPassword: this.confirmPassword
        });
        if (response.status === 200) {
          alert('注册成功！');
          this.$router.push({ name: 'login' });
        } else {
          alert('注册失败，请重试！');
        }
      } catch (error) {
        alert('注册失败，请重试！');
      } finally {
        this.isLoading = false;
      }
    }
  }
};
</script>

6. 创建后端API接口（server.js）。

const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');

const app = express();
app.use(bodyParser.json());

app.post('/api/login', async (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  // 模拟数据库查询
  const user = await new Promise((resolve, reject) => {
    setTimeout(() => {
      if (username === 'admin' && password === 'password') {
        resolve({ id: 1, username: 'admin' });
      } else {
        reject('用户名或密码错误！');
      }
    }, 1000);
  });

  if (user) {
    const token = jwt.sign({ id: user.id, username: user.username }, 'secret');
    res.status(200).json({ token });
  } else {
    res.status(401).json({ message: '用户名或密码错误！' });
  }
});

app.post('/api/register', async (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  const confirmPassword = req.body.confirmPassword;

  // 模拟数据库查询
  const isExist = await new Promise((resolve, reject) => {
    setTimeout(() => {
      if (username === 'admin') {
        resolve(true);
      } else {
        resolve(false);
      }
    }, 1000);
  });

  if (!isExist) {
    res.status(200).json({ message: '注册成功！' });
  } else {
    res.status(409).json({ message: '用户名已存在！' });
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

7. 运行服务器（server.js）。

node server.js

现在，您可以在浏览器中访问http://localhost:3000/进行登录操作，或者在浏览器中访问http://localhost:3000/register进行注册操作。