hyperf2.1+ElementUi实现后台登录单页demo

swoole  /  管理员 发布于 4年前   1149

最近有个项目打算用hyperf + jwt + vue + element ui做个后台

先开个头，做个后台登录功能

环境介绍

后端：hyperf2.1 + jwt

前端：vue2.5+ element ui 2.15+

  "dependencies": {
    "element-ui": "^2.15.6",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2"
  },

前端目录：截图一下 就不写了 懒

实现功能：登录单页demo

后端hyperf+jwt (之前有记录文章的，有兴趣的自行去下面的url看看)

https://www.zongscan.com/demo333/89383.html

前端vue 

路由

/nodejs/mytest/src/router/index.js

import login from '@/views/login'
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login
    }
  ]

登录单页代码

/nodejs/mytest/src/views/login.vue

<template>
    <div class="login-container">
        <el-form :model="loginForm" :rules="rules2" status-icon ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-page">
            <h3 class="title">Hyperf+ElementUi后台登录</h3>
            <el-form-item prop="username">
              <el-input type="text" v-model="loginForm.name" placeholder="用户名"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="text" v-model="loginForm.password" placeholder="密码"/>
            </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,
            loginForm: {
                name: 'admin',
                password: '123456',
            },
            rules2: {
                name: [{required: true, message: 'please enter your account', trigger: 'blur'}],
                password: [{required: true, message: 'enter your password', trigger: 'blur'}]
            },
            checked: false
        }
    },
    methods: {
        handleSubmit(event){
          this.$refs.loginForm.validate((valid) => {
              if(valid){
                  this.logining = true;
                  if (this.loginForm.name === '' || this.loginForm.password === '') {
                    this.logining = false;
                  } else {
                    this.axios({
                      method: 'get',
                      url: 'https://blog.zongscan.com/admin/login',
                      //get用params post用data
                      params: this.loginForm
                    }).then(res => {
                      this.logining = false;
                      console.log(res.data)
                      //保存token
                      localStorage.clear()
                      localStorage.setItem('token','Bearer ' + res.data.token)
                      this.$router.push('/')
                    }).catch(error => {
                      this.logining = false
                      this.$alert('账号或密码错误!', 'info', {
                          confirmButtonText: 'ok'
                      })
                    })
                  }
              }else{
                  console.log('error submit!');
                  return false;
              }
          })
        }
    }
};
</script>
<style scoped>
.login-container {
    width: 100%;
    height: 100%;
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 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>

效果图：

点击登录就进首页了 后面在记录文章

有兴趣的可以收藏一下