【Vue入门】利用VueCli搭建基本框架--创建登陆页面（三）

上一节主要讲了框架几个文件的功能并改造了App.vue以及main.js文件

这节主要完成login页面并在程序运行时检查本地token，如果没有直接跳转到登陆页面

一、完成login页面，界面如下：

代码如下：

<template>
    <div class="content">
        <el-row>
            <el-col :span="4" class="left">
                <div>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="main">
                    <div >
                        <img width="300" height="300" src="../../assets/login.png" alt="登陆页背景图">
                    </div>
                    <div class="main-div">
                        <!-- 用来给元素或子组件注册引用信息，引用信息会在父$refs对象中存在，如果用在普通dom元素，则就指向dom元素，如果用在子组件上，引用就指向组件实例 -->
                        <el-form :model="formInfo" status-icon :rules="rules" ref="form" size="mini">
                            <el-form-item class="lable" label="账号：" prop="name">
                                <el-input class="input" size="medium" v-model="formInfo.name"></el-input>
                            </el-form-item>
                            <el-form-item v-if="isActive" class="lable" label="密码：" prop="pass">
                                <el-input class="input" size="medium" type="password" v-model="formInfo.pass" ref="password" auto-complete="off" >
                                </el-input>
                                <div class="iconEye">
                                    <i  class="iconfont icon-yincangmima" @click="hidePass"></i>
                                </div>
                            </el-form-item>
                            <el-form-item v-else class="lable" label="密码：" prop="pass">
                                <el-input class="input" size="medium" type="text" v-model="formInfo.pass" ref="password" auto-complete="off" >
                                </el-input>
                                <div class="iconEye">
                                    <i class="iconfont icon-xianshimima" @click="showPass"></i>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="button" size="medium" type="primary" @click="submitForm()">提交</el-button>
                                <el-button class="button" size="medium" @click="resetForm()">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-col>
            <el-col :span="4" class="right"><div></div></el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        data(){
            //验证登录名
            var validateName = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('请输入登录名'));
                } else {
                callback()
                }
            };
            var validatePass = (rule,value,callback) =>{
                if(value === ''){
                    callback(new Error('请输入密码'));
                }else {
                callback()
                }
            };
            return{
                //formInfo对象
                formInfo:{
                    name:'',
                    pass:''
                },
                isActive:true,
                //自定义的验证规则
                rules: {
                    name: [
                        { validator: validateName, trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ]
                }
            };
        },
        methods:{
            //提交方法
            submitForm(){
                //调用form表单的validate方法，对所有元素进行校验
                this.$refs.form.validate((valid)=>{
                    if (valid) {
                        console.log('输入的账号为：' + this.formInfo.name);
                        console.log('输入的密码为：' + this.formInfo.pass);
                        /////写api调用


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            //重置方法
            resetForm() {
                this.$refs.form.resetFields();   //调用form表单的resetFields内部重置方法
            },
            //显示
            showPass(){
                console.log('点击了显示密码事件')
                this.isActive = !this.isActive
            },
            //隐藏
            hidePass(){
                console.log('点击了隐藏密码事件')
                this.isActive = !this.isActive
            }
        }
    }
</script>
<style scoped>
    .content{
        overflow: hidden;
        margin-top: 5%;
    }

    .main{
        text-align: center;
        /* border:1px solid blue; */
    }

    .main-div{
        border: 1px solid lightgray;
        border-radius: 4px;
    }

    .left{
        border:1px solid white;
    }

    .right{
        border:1px solid white;
    }

    .lable{
        border:1px solid white;
        width: 75%;
        margin-left:13%;
    }

    .input{
        /* text-align: left; */
        border:1px solid white;
    }

    

    .button{
        width: 200px;
    }

    .iconEye{
        border:1px solid white;
        width: 20px;
        height: 20px;
        position:absolute;
        left:100%;
        top:30px;
    }
</style>

 

大概功能：

　　使用elementui组件，实现输入内容自定义验证、重置、还有密码的显示与隐藏

在使用过程中图标用了iconfont里面的，具体用法可以百度

二、改造App.vue页面，让它不要再显示之前的页面信息，截图代码如下   注释掉以前的代码  只添加路由标签

<template>
  <div id="app">
    <!-- <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>-->
    <router-view></router-view>
  </div> 
</template>

三、新建路由文件

　　新建router文件夹，并创建index.js文件     

       此文件在main.js中需要引入   

//导入自己写的router路由
import router from './router/index'

Vue.use(router)

　　然后编辑index.js文件，对路又不熟悉的可参考：vuerouter官网  

     里面简单定义了路由以及路由的跳转规则

　 代码如下：

import Home from '@/views/home/index'
import Login from '@/views/login/index'
//导入VueRouter
import VueRouter from 'vue-router'

const router = new VueRouter({
    mode: 'history',//去掉#号
    routes: [
        {
            path: '/',
            name: 'Root',
            component: Login
        },
        {
            path:'/home',
            name:'Home',
            component: Home,
            redirect: "/Students",
            children:[
                {
                    path: "/students",
                    name: "Students",
                    component: () => import("@/views/students/index")
                },
            ]
        }
    ]
})

//全局路由守卫
router.beforeEach((to, from, next) => {
    if (to.path === '/') 
        return next();
    // 取出token
    const token = window.sessionStorage.getItem('token');
    if (!token)   //没有token的时候 跳转到登陆页面
        return next('/');
    
    next();
  })

  export default router

 

完成之后跑起来就能看到login页面了