hyperf2.1+ElementUi实现后台登录单页demo
swoole  /  管理员 发布于 2年前   875
最近有个项目打算用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>
效果图:
点击登录就进首页了 后面在记录文章
有兴趣的可以收藏一下
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号