实现Vue的登录页面

迷南。 2023-10-04 22:43 56阅读 0赞

#### 实现Vue的登录页面步骤： ####

1.前期准备
    1.1 安装Node.js：从官网下载地址（https://nodejs.org/zh-cn/）安装完成后，在终端输入 node -v 来查询版本号。
    
    1.2 安装Webpack：在终端输入npm install webpack -g来进行全局安装。
    
    1.3 安装Vue-cli：在终端输入npm install --global vue-cli来进行全局安装。
    
    2. 搭建Vue项目
    
    2.1 创建项目：在终端输入vue init webpack projectname来创建项目。
    
    2.2 项目目录：进入项目目录中，可以看到src和build等文件夹和文件。其中src为我们开发时需要操作的目录，build为我们项目打包的相关配置。
    
    2.3 导入Element UI：在终端中输入npm i element-ui -S来进行Element UI的安装，并在main.js中导入相关模块。
    
    3. 实现登录页面
    
    3.1 修改App.vue：在template中加入router-view组件，用于展示Login.vue等其他组件。
    
    3.2 创建Login.vue：在components文件夹中新建Login.vue组件，并在其template中构建表单元素。
    
    3.3 配置路由：在router文件夹中的index.js文件中配置路由。
    
    4. 实现登录功能
    
    4.1 导入axios：在终端中输入npm i axios -S来进行axios的安装。
    
    4.2 导入qs和Mock：在终端中输入npm i qs mockjs -S来进行qs和Mock的安装，并在main.js中导入相关模块。
    
    4.3 编写提交js：在Login.vue中编写submit方法，用于提交表单数据至后端。
    
    4.4 编写Mock测试数据：在mock文件夹中的index.js文件中编写数据，用于测试前端与后端交互是否正常。
    
    以上是基本的步骤，具体实现方式可根据具体项目情况进行调整和修改。

#### 以下是一个简单的Vue登录页面的代码: ####

App.vue

<template>
      <div id="app">
        
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
        
      name: 'App'
    }
    </script>

<template>
      <div class="login-container">
        <h2>用户登录</h2>
        <form>
          <label>用户名：</label>
          <input type="text" v-model="username">
          <br>
          <label>密 码：</label>
          <input type="password" v-model="password">
          <br>
          <button type="submit" @click.prevent="handleSubmit">登录</button>
        </form>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    import qs from 'qs'
    
    export default {
        
      name: 'Login',
      data () {
        
        return {
        
          username: '',
          password: ''
        }
      },
      methods: {
        
        handleSubmit () {
        
          // 提交表单数据至后端
          axios.post('login', qs.stringify({
        
            username: this.username,
            password: this.password
          })).then(res => {
        
            console.log(res)
            // 登录成功，跳转到首页
            this.$router.push({
         path: '/' })
          }).catch(err => {
        
            console.log(err)
            // 登录失败，给出错误提示
            alert('登录失败：' + err.response.data.message)
          })
        }
      }
    }
    </script>
    
    <style>
    .login-container {
        
      margin: 100px auto;
      width: 400px;
      text-align: center;
    }
    h2 {
        
      margin-bottom: 20px;
    }
    form {
        
      text-align: left;
    }
    label {
        
      display: inline-block;
      width: 80px;
      margin-right: 10px;
      text-align: right;
    }
    input {
        
      width: 240px;
      height: 30px;
      padding: 0 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      margin-bottom: 10px;
    }
    button {
        
      width: 260px;
      height: 40px;
      background-color: #409EFF;
      color: #fff;
      border: none;
      border-radius: 4px;
      outline: none;
      cursor: pointer;
    }
    button:hover {
        
      background-color: #66B1FF;
    }
    </style>

router/index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/components/Login'
    
    Vue.use(Router)
    
    export default new Router({
        
      routes: [
        {
        
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
        
          path: '/login',
          name: 'Login',
          component: Login
        }
      ]
    })

注意，以上只是一个简单示例代码，真实的项目需要根据具体情况进行相应的调整和修改。另外，为了安全起见，请勿在前端将明文密码传输到后端，应该使用加密方式传输。