vue从登陆注册开始

要写一个网页界面，一般都是从登陆注册开始的。

我们直接使用element-plus来写登陆注册页面。

下载element-plus

npm install element-plus --save

引入element-plus

之前我们说过js的入口在main.js李，引入组件也是在这里引入的。在main.js中修改如下内容：

import { createApp } from 'vue'
import './style.css'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

编写login页面

引入element-plus后就可以编写登陆界面了，前面我们说过vue采用组件化和模块化开发，这里我们开发一个login组件，并在app里引入该组件。

login.vue的内容如下所示：

<template>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
      <el-form-item label="Username" prop="username">
        <el-input v-model="loginForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">Login</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
          password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
        }
      };
    },
    methods: {
      login() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            // 在这里处理登录逻辑，比如发送请求给后端验证登录信息
            console.log('Logging in...');
          } else {
            return false;
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .login-form {
    width: 300px;
    margin: 0 auto;
  }
  </style>

需要注意的是上面的登陆界面还没有美化，即设置css样式，这个后面再来添加，前期先保证功能。

同时上面的界面只有登陆，如果我想要实现没有用户，用户要进行注册，跳转到注册页面，此时就需要引入路由，实现页面跳转。

引入路由

npm install vue-router@4 --save

路由一般放在router目录下，并新建一个index.js文件来存放路由信息，下面是index.js的内容。

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';

const routes = [
  {
        path: '/',
        redirect: '/login' // 将根路径重定向到登录页面
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

当前我们只有login和register两个界面，所以这里只注册了两个路由，后面随着页面的增加可以将其再添加到这个文件里。

添加的register页面内容如下所示：

<template>
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px" class="register-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="registerForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  export default {
    data() {
      return {
        registerForm: {
          username: '',
          password: ''
        },
        registerRules: {
          username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
          password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
        }
      };
    },
    methods: {
      register() {
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            // 在这里处理注册逻辑，比如发送请求给后端保存用户信息
            console.log('Registering...');
          } else {
            return false;
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .register-form {
    width: 300px;
    margin: 0 auto;
  }
  </style>

默认登录的是登陆界面，需要在登陆界面进行跳转，登录界面修改如下：

<template>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="primary" @click="goToRegisterPage">注册</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
          password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
        }
      };
    },
    methods: {
      login() {
        // 登录逻辑
        console.log('Logging in...');
      },
      goToRegisterPage() {
        this.$router.push('/register');
      }
    }
  };
  </script>
  
  <style scoped>
  .login-form {
    width: 300px;
    margin: 0 auto;
  }
  </style>
  

定义好路由后还是需要在main.js引入定义的路由,修改main.js里的内容如下：

import { createApp } from 'vue'
import './style.css'
import router from './router'; // 引入路由文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount('#app')

引入router后还需要把route-view设置到App.vue里，否则无法实现跳转。

App.vue的内容如下所示：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>