vue+elementui搭建后台管理界面-登录

痛定思痛。 2023-06-11 06:27 24阅读 0赞

## 1 node环境安装 ##

从 [node官网][node]下载安装包

## 2 vue-cli ##

npm install vue-cli -g

## 3 新建项目 ##

vue init webpack vue-project

可保持默认，一路回车  
完成后

cd vue-project  
    npm run dev

## 4 安装并引入 elementui ##

npm install element-ui --save

编辑 src/main.js , 修改为

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    Vue.config.productionTip = false
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })

## 5 编写登录页面 ##

src 目录下新建目录 **views**  
编写 views/Login.vue

<template>
         <div class="login-container">
            <el-form :model="ruleForm2" :rules="rules2"
             status-icon
             ref="ruleForm2" 
             label-position="left" 
             label-width="0px" 
             class="demo-ruleForm login-page">
                <h3 class="title">系统登录</h3>
                <el-form-item prop="username">
                    <el-input type="text" 
                        v-model="ruleForm2.username" 
                        auto-complete="off" 
                        placeholder="用户名"
                    ></el-input>
                </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" 
                            v-model="ruleForm2.password" 
                            auto-complete="off" 
                            placeholder="密码"
                        ></el-input>
                    </el-form-item>
                <el-checkbox 
                    v-model="checked"
                    class="rememberme"
                >记住密码</el-checkbox>
                <el-form-item style="width:100%;">
                    <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
    
    <script>
    export default {
         data(){
            return {
                logining: false,
                ruleForm2: {
                    username: 'admin',
                    password: '123456',
                },
                rules2: {
                    username: [{required: true, message: '请输入账号', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                },
                checked: false
            }
        },
        methods: {
            handleSubmit(event){
                this.$refs.ruleForm2.validate((valid) => {
                    if(valid){
                        this.logining = true;
                        if(this.ruleForm2.username === 'admin' && 
                           this.ruleForm2.password === '123456'){
                               this.logining = false;
                               sessionStorage.setItem('user', this.ruleForm2.username);
                               this.$router.push({path: '/home'});
                        }else{
                            this.logining = false;
                            this.$alert('用户名或密码错误!', '提示', {
                                confirmButtonText: 'ok'
                            })
                        }
                    }else{
                        console.log('error submit!');
                        return false;
                    }
                })
            }
        }
    }
    </script>
    
    <style scoped>
    
    .login-container {
        width: 100%;
        height: 100%;
        background: #4373a5;
    
        /* 登录框上下对齐 */
        display: flex;
        align-items: center;
    }
    .login-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin:0px auto;
        width: 350px;
        padding: 20px 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    label.el-checkbox.rememberme {
        margin: 0px 0px 15px;
        text-align: left;
    }
    </style>

## 6 增加路由 ##

访问 login 要跳转到登录页面  
修改 router/index.js 为

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

访问 http://127.0.0.1:8080/\#/login 出现登录页面:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

可参考：[https://www.cnblogs.com/wbjxxzx/p/9942648.html][https_www.cnblogs.com_wbjxxzx_p_9942648.html]

[node]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20230531/9e9f7761bd324f7ca24996d5bc4c2b21.png
[https_www.cnblogs.com_wbjxxzx_p_9942648.html]: https://www.cnblogs.com/wbjxxzx/p/9942648.html