当前位置:   article > 正文

vue+elementui搭建后台管理界面-登录_基于elementui 的后台管理登录页面

基于elementui 的后台管理登录页面

1 node环境安装

从 node官网下载安装包

2 vue-cli

npm install vue-cli -g

3 新建项目

vue init webpack vue-project

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

  1. cd vue-project
  2. npm run dev

4 安装并引入 elementui

npm install element-ui --save

编辑 src/main.js , 修改为

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import ElementUI from 'element-ui'
  5. import 'element-ui/lib/theme-chalk/index.css'
  6. Vue.use(ElementUI)
  7. Vue.config.productionTip = false
  8. new Vue({
  9. el: '#app',
  10. router,
  11. render: h => h(App)
  12. })

5 编写登录页面

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

  1. <template>
  2. <div class="login-container">
  3. <el-form :model="ruleForm2" :rules="rules2"
  4. status-icon
  5. ref="ruleForm2"
  6. label-position="left"
  7. label-width="0px"
  8. class="demo-ruleForm login-page">
  9. <h3 class="title">系统登录</h3>
  10. <el-form-item prop="username">
  11. <el-input type="text"
  12. v-model="ruleForm2.username"
  13. auto-complete="off"
  14. placeholder="用户名"
  15. ></el-input>
  16. </el-form-item>
  17. <el-form-item prop="password">
  18. <el-input type="password"
  19. v-model="ruleForm2.password"
  20. auto-complete="off"
  21. placeholder="密码"
  22. ></el-input>
  23. </el-form-item>
  24. <el-checkbox
  25. v-model="checked"
  26. class="rememberme"
  27. >记住密码</el-checkbox>
  28. <el-form-item style="width:100%;">
  29. <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
  30. </el-form-item>
  31. </el-form>
  32. </div>
  33. </template>
  34. <script>
  35. export default {
  36. data(){
  37. return {
  38. logining: false,
  39. ruleForm2: {
  40. username: 'admin',
  41. password: '123456',
  42. },
  43. rules2: {
  44. username: [{required: true, message: '请输入账号', trigger: 'blur'}],
  45. password: [{required: true, message: '请输入密码', trigger: 'blur'}]
  46. },
  47. checked: false
  48. }
  49. },
  50. methods: {
  51. handleSubmit(event){
  52. this.$refs.ruleForm2.validate((valid) => {
  53. if(valid){
  54. this.logining = true;
  55. if(this.ruleForm2.username === 'admin' &&
  56. this.ruleForm2.password === '123456'){
  57. this.logining = false;
  58. sessionStorage.setItem('user', this.ruleForm2.username);
  59. this.$router.push({path: '/home'});
  60. }else{
  61. this.logining = false;
  62. this.$alert('用户名或密码错误!', '提示', {
  63. confirmButtonText: 'ok'
  64. })
  65. }
  66. }else{
  67. console.log('error submit!');
  68. return false;
  69. }
  70. })
  71. }
  72. }
  73. }
  74. </script>
  75. <style scoped>
  76. .login-container {
  77. width: 100%;
  78. height: 100%;
  79. background: #4373a5;
  80. /* 登录框上下对齐 */
  81. display: flex;
  82. align-items: center;
  83. }
  84. .login-page {
  85. -webkit-border-radius: 5px;
  86. border-radius: 5px;
  87. margin:0px auto;
  88. width: 350px;
  89. padding: 20px 35px 35px 15px;
  90. background: #fff;
  91. border: 1px solid #eaeaea;
  92. box-shadow: 0 0 25px #cac6c6;
  93. }
  94. label.el-checkbox.rememberme {
  95. margin: 0px 0px 15px;
  96. text-align: left;
  97. }
  98. </style>

6 增加路由

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

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import Login from '@/views/Login'
  5. Vue.use(Router)
  6. export default new Router({
  7. routes: [
  8. {
  9. path: '/',
  10. name: 'HelloWorld',
  11. component: HelloWorld
  12. },
  13. {
  14. path: '/login',
  15. name: 'Login',
  16. component: Login
  17. },
  18. ]
  19. })

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

可参考:https://www.cnblogs.com/wbjxxzx/p/9942648.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/840263
推荐阅读
相关标签
  

闽ICP备14008679号