【vue实战项目】通用管理系统:登录页

简介: 【vue实战项目】通用管理系统:登录页

1.前言

本文是博主vue实战项目系列文章的第一篇,本系列将清晰的从搭建环境开始一步步开发一个vue的通用管理系统,项目规模不大,较为小巧,但是覆盖了目前常用的前端开发技术。很适合作为一个前端的练习项目,也特别适合后端的小伙伴用来熟悉前端。整个系列走完,会对当前的前端开发的技术栈有了较为大致的了解,不会再打开现在的一个前端项目两眼一抹黑。

本项目会先用vue2来开发,然后升级成vue3,前置的环境准备等相关内容请移步:

从0开始搭建一个前端项目的架子-CSDN博客

2.表单

一个登录页由哪些东西构成?无非就是最核心的输入用户名密码的输入框,再加上一些杂七杂八的修饰元素。比如我们常见的QQ邮箱的页面:

输入用户名密码的地方很明显是一个表单,作为整个登录页的核心,这个输入框表单当然是我们要首先写出来的。要是用原生HTML来写的话,还要自己手动编写很多关于样式的内容,太麻烦了,UI框架的好处就体现出来了,自带的一系列带样式的组件,拿来就用,既然本项目选择了elementUI来作为UI框架,直接去elementUI官网上去拿一个自己看得上的表单组件即可:

我看上了这个表单:

于是直接展开它的代码,把其中要的表单组件的代码拷贝出来新建一个Login组件即可。

我们要拷贝的代码:

<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
  <el-form-item label="名称">
    <el-input v-model="formLabelAlign.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-input v-model="formLabelAlign.region"></el-input>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input v-model="formLabelAlign.type"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        }
      };
    }
  }
</script>

新建一个Login组件:

稍微调整一下Login组件的内容,将这个表单组件调整为,我们要的输入用户名、密码的输入框,主要就是改一下输入框的名字,改一下数据的名字:

<template>
<el-form
        label-width="80px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
</el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      }
  }
}
};
</script>

3.容器

光有了输入框表单,我们可以启动来看看是什么样子:

组件直接铺满了屏幕,这显然不是我们想要的是前面看到的那种类似于QQ邮箱登录页那种输入框的效果。我们需要找一个容器来将输入框表单装起来,elementUI提供了卡片容器可以实现这种效果:

把代码扣下来,将输入框放进卡片容器中。

代码示例:

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
      <el-form
        label-width="80px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

效果:

调整一下整体的CSS:

<style lang="less">
.login{
  width: 100%;
  height:100%;
  position: absolute;
  background: #409EFF;
  .box-card{
    width:450px;
    margin: 200px auto;
    .el-card__header{
      font-size: 30px;
    }
    .el-button{
      width: 100%;
    }
 
  }
}
</style>

效果:

4.路由

登录页应该作为系统的默认首页,所以我们需要配置好路由:

让访问/和/login的请求都转跳到登录页上。

5.校验

登录页的输入框应该有合理的输入校验,对输入的用户名、密码进行校验,对于不合法的输入,应该弹出提示。elementUI的表单组件是允许在标签上配置校验规则的:

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
 
      <el-form
        label-width="80px"
        :model="form"
        ref="form"
      >
        <el-form-item label="用户名" prop="username" 
        :rules="[{required:true,message:'请输入用户名',trigger:'blur'}]">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password"
        :rules="[{required:true,message:'请输入用户名',trigger:'blur'}]"
        >
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
 
    </el-card>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log(this.form)
        }else{
          console.error(this.form)
        }
      })
    }
  }
};
</script>
 
<style lang="less">
.login{
  width: 100%;
  height:100%;
  position: absolute;
  background: #409EFF;
  .box-card{
    width:450px;
    margin: 200px auto;
    .el-card__header{
      font-size: 30px;
    }
    .el-button{
      width: 100%;
    }
 
  }
}
</style>


优化校验规则:


原来的校验规则是在输入框上单独写,这样代码不好维护,elementUI支持将校验规则抽出来,在表单上以:rules="rules"的方式来引用,这样可以将规则集中写在数据域里,便于维护。这些elementUI支持的校验规则和标签上的扩展属性可以翻看elementUI的官方文档。

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
 
      <el-form
        label-width="80px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
 
    </el-card>
  </div>
</template>
 
<script>
export default {
  data() {
    //elementUI支持在数据校验时传三个参数,规则、输入参数、回调函数
    const validData=(rule,value,callback)=>{
      if(value===''){
        callback(new Error('输入不能为空'))
      }else{
        callback()
      }
    }
    return {
      form: {
        username: "",
        password: "",
      },
      rules:{
        username:[{validator:validData,trigger:'blur'}],
        password:[{validator:validData,trigger:'blur'}]
      }
    };
  },
  methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log(this.form)
        }else{
          console.error(this.form)
        }
      })
    }
  }
};
</script>
 
<style lang="less">
.login{
  width: 100%;
  height:100%;
  position: absolute;
  background: #409EFF;
  .box-card{
    width:450px;
    margin: 200px auto;
    .el-card__header{
      font-size: 30px;
    }
    .el-button{
      width: 100%;
    }
 
  }
}
</style>

效果:

6.请求后端接口

最后我们使用axios加上对后端接口的请求,home页面暂时还未开发,直接转跳到HelloWorld组件上去即可:

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
      <el-form
        label-width="80px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
 
<script>
export default {
  data() {
    //elementUI支持在数据校验时传三个参数,规则、输入参数、回调函数
    const validData=(rule,value,callback)=>{
      if(value===''){
        callback(new Error('输入不能为空'))
      }else{
        callback()
      }
    }
    return {
      form: {
        username: "",
        password: "",
      },
      rules:{
        username:[{validator:validData,trigger:'blur'}],
        password:[{validator:validData,trigger:'blur'}]
      }
    };
  },
  methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log(this.form)
          this.$router.push('/home')
          this.axios.post('https://rapserver.sunmi.com/app/moc/340/login',this.form)
          .then(res=>{
            console.log(res)
            if(res.data.status===200){
              localStorage.setItem('username',res.data.username)
              this.$message({message:res.data.message,type:'success'})
              this.$router.push('/home')
            }
          })
        }else{
          console.error(this.form)
        }
      })
    }
  }
};
</script>
 
<style lang="less">
.login{
  width: 100%;
  height:100%;
  position: absolute;
  background: #409EFF;
  .box-card{
    width:450px;
    margin: 200px auto;
    .el-card__header{
      font-size: 30px;
    }
    .el-button{
      width: 100%;
    }
 
  }
}
</style>

目录
相关文章
|
5天前
|
JavaScript
|
7天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
21 6
|
4天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
7天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
7天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
7天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
19 1
|
7天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
26 0
|
12天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
22 1
|
13天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
13天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料

相关实验场景

更多