使用vue编写登录页面详细过程

首先，创建项目login

vue create login
cnpm install elementui vue-router vuex axios

结构如下

具体操作过程

在main.js中写入：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import store from './store'
//导入全局样式表
import './assets/css/globe.css'
Vue.use(ElementUI)
Vue.config.productionTip = false

//配置axios全局使用
import axios from 'axios'
axios.defaults.baseURL='http://127.0.0.1:8000/api/'
// 将vue的原型http对象设置未axios，以后用这个原型就可以直接使用
Vue.prototype.$http = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

assets下新建css文件夹再创建一个globe.css用于存储全局变量，css同级目录下还有一张默认的vue图标图片文件

/*全局样式表*/
html,
body,
#app{
  height: 100%;
  margin: 0;
  padding: 0;
}

components下新建login.vue

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <!--        用户名-->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!--        密码-->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-key" type="password"></el-input>
        </el-form-item>
        <!--        按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary" @click="Login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        // 数据绑定对象
        loginForm: {
          username: 'hzw',
          password: '123'
        },
        // 验证规则对象
        loginFormRules: {
          //验证用户
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入登录密码', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      Login() {
        // 预验证
        this.$refs.loginFormRef.validate(async valid => {
          //未验证通过则直接return
          if (!valid) return;
          //不加await的化不会打印出数据，await只能用于async修饰的函数
          const response = await this.$http.post('pro/login', this.loginForm).catch(() => this.$message.error("登录失败,请联系Tel:"))
          // {data:res}解构，将得到的返回值的data解构为res
          console.log(response.data)
          // console.log(res.meta.statusText)
          //从res的元数据中得到返回状态
          if (response.status !== 200) return;
          if (response.data.token) return this.$message.success("登录成功")
          if (response.data.error) return this.$message.error(response.data.error)
        });
      },
      //重置登录表单
      resetLoginForm() {
        // console.log(this)
        // ui框架自带的form表单方法
        this.$refs.loginFormRef.resetFields();
      }

    }
  }
</script>
<!--加上scoped是将样式应用于此组件，不加是全局-->
<style lang="less" scoped>
  .login_container {
    background-color: rgba(21, 35, 242, 0.25);
    height: 100%;
  }

  .login_box {
    width: 450px;
    height: 300px;
    background-color: white;
    border-radius: 3px;
    /*容器内居中*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      /*边框阴影*/
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .login_form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .btns {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>

route文件夹下index.js编写路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

import login from "../components/login";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect:'/login'
  },
  {
    path:'/login',
    component:login
  }
]

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

export default router

项目运行如图：

• 登录界面:
  
• 成功提示

- 若是用户名和密码错误，则按服务器返回的错误提示显示
- 若是请求接口错误，提示登录失败并提供联系方式

开启之前文章中建立的接口进行验证：文章链接

下一步根据得到的数据（权限）进行路由跳转控制