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

目录

1.前言

2.表单

3.容器

4.路由

5.校验

6.请求后端接口

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'}]
      }
    };
  }
};
</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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/120214.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Intel oneAPI笔记（3）--jupyter官方文档（SYCL Program Structure）学习笔记

Intel oneAPI笔记（3）--jupyter官方文档（SYCL Program Structure）学习笔记

前言 本文是对jupyterlab中oneAPI_Essentials/02_SYCL_Program_Structure文档的学习记录&#xff0c;包含对Device Selector、Data Parallel Kernel、Host Accessor、Buffer Destruction、的介绍&#xff0c;最后还有一个小关于向量&#xff08;Vector&#xff09;加法的实例 …
阅读更多...
使用Python爬虫被封ip的解决方案

使用Python爬虫被封ip的解决方案

在使用 Python 程序进行网络爬虫开发时&#xff0c;可能会因为下面原因导致被封IP或封禁爬虫程序&#xff1a; 1、频繁访问网站 爬虫程序可能会在很短的时间内访问网站很多次&#xff0c;从而对目标网站造成较大的负担和压力&#xff0c;这种行为容易引起目标网站的注意并被封…
阅读更多...
DDD技术方案落地实践

DDD技术方案落地实践

1. 引言 从接触领域驱动设计的初学阶段&#xff0c;到实现一个旧系统改造到DDD模型&#xff0c;再到按DDD规范落地的3个的项目。对于领域驱动模型设计研发&#xff0c;从开始的各种疑惑到吸收各种先进的理念&#xff0c;目前在技术实施这一块已经基本比较成熟。在既往经验中总结…
阅读更多...
使用JavaScript编写的爬虫程序

使用JavaScript编写的爬虫程序

这是一个使用JavaScript编写的爬虫程序&#xff0c;它使用了Elasticsearch和Nginx来收集和存储数据。在这个程序中&#xff0c;我们首先设置了代理信息&#xff0c;然后使用JavaScript编写了一个爬虫程序来收集数据。以下是每行代码和步骤的详细解释&#xff1a; // 定义代理信…
阅读更多...
华为fusionInsigtht集群es连接工具

华为fusionInsigtht集群es连接工具

华为fusionInsight为用户提供海量数据的管理及分析功能&#xff0c;快速从结构化和非结构化的海量数据中挖掘您所需要的价值数据。开源组件结构复杂&#xff0c;安装、配置、管理过程费时费力&#xff0c;使用华为FusionInsight Manager将为您提供企业级的集群的统一管理平台,在…
阅读更多...
漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案

漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案

现象 漏刻有时项目开发中的调用了百度地图API&#xff0c;在PC端、IOS和安卓机型测试都没有问题。但是使用华为手机部分型号时&#xff0c;前端在监听点击事件的时候是使用 map.addEventListener(click,function(){...})&#xff0c;无法触发。或 原理 通过监听touchstart和…
阅读更多...
Android 常用 UI 组件

Android 常用 UI 组件

目录 ​编辑 1. View 和ViewGroup 2. Android UI 开发概述 2.1 界面布局开发 2.2 控件开发 2.3 AdapterView 与 Adapter 开发 2.4 UI 组件开发 2.5 自定义 View、图形图像和动画 1. View 和ViewGroup Android中所有的UI元素都是使用View和ViewGroup对象建立的,…
阅读更多...
java split字符串作业

java split字符串作业

建立一个字符串操作类&#xff08;StringDemo&#xff09;&#xff0c;在main函数中做一下操作&#xff1a; 1、定义字符串变量String s1”I am a good student”; String s2”I am a good worker”; String s3”3,6,12,20”; 2、用compareTo方法比较s1和s2的大小&#xff0c;并…
阅读更多...
Vue - Syntax Error: TypeError: this.getOptions is not a function 项目运行时报错，详细解决方案

Vue - Syntax Error: TypeError: this.getOptions is not a function 项目运行时报错，详细解决方案

报错问题 关于此问题网上的教程都无法解决，如果您的报错与本文相似，本文即可 100% 完美解决。 在 vue2.js 项目中，执行 npm run serve 运行时出现如下报错信息， Syntax Error: TypeError: this.getOptions is not a function 解决方案 按照以下步骤，即可完美解决。 这个错…
阅读更多...
CRM中的销售机会管理是什么？三个步骤帮你创建销售渠道

CRM中的销售机会管理是什么？三个步骤帮你创建销售渠道

企业销售业务中&#xff0c;有个名词叫做“机会管理”&#xff0c;有效的机会管理可以帮助销售人员准确地抓住潜在客户群体&#xff0c;并将其转化为真正的客户、持续带来收入。CRM客户管理系统也是销售机会管理的一个重要工具&#xff0c;帮助销售人员与正确的人建立起关系&am…
阅读更多...
python 之 集合的相关知识

python 之 集合的相关知识

文章目录 1. 创建集合使用花括号 {}使用 set() 函数 2. 集合的特点3. 集合操作添加元素删除元素 4. 集合运算5. 不可变集合总结 在 Python 中&#xff0c;集合&#xff08;Set&#xff09;是一种无序且不重复的数据集合。它是由一组唯一元素组成的。下面是关于集合的一些基本知…
阅读更多...
（后续补充）vue+express、gitee pm2部署轻量服务器

（后续补充）vue+express、gitee pm2部署轻量服务器

首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 关闭防火墙 systemctl stop firewalld 重新载入防火墙使设置生效 firewall-cmd --reload 后端的 pm2.config.cjs …
阅读更多...
【小尘送书-第十一期】编程的基石，开发的核心:《算法秘籍》

【小尘送书-第十一期】编程的基石，开发的核心:《算法秘籍》

大家好&#xff0c;我是小尘&#xff0c;欢迎你的关注&#xff01;大家可以一起交流学习&#xff01;欢迎大家在CSDN后台私信我&#xff01;一起讨论学习&#xff0c;讨论如何找到满意的工作&#xff01; &#x1f468;‍&#x1f4bb;博主主页&#xff1a;小尘要自信 &#x1…
阅读更多...
IC设计之《集成电路设计宝典》，共423页，可打印，快来领取吧~~~

IC设计之《集成电路设计宝典》，共423页，可打印，快来领取吧~~~

集成电路&#xff08;integrated circuit&#xff09;是一种微型电子器件或部件。采用一定的工艺&#xff0c;把一个电路中所需的晶体管、电阻、电容和电感等元件及布线互连一起&#xff0c;制作在一小块或几小块半导体晶片或介质基片上&#xff0c;然后封装在一个管壳内&#…
阅读更多...
Corel VideoStudio 会声会影2024剪辑中间的视频怎么删 剪辑中音乐太长怎么办

Corel VideoStudio 会声会影2024剪辑中间的视频怎么删 剪辑中音乐太长怎么办

我很喜欢视频剪辑软件Corel VideoStudio 会声会影2024&#xff0c;因为它使用起来很有趣。它很容易使用&#xff0c;但仍然给你很多功能和力量。视频剪辑软件Corel VideoStudio 会声会影2023让我与世界分享我的想法&#xff01;“这个产品的功能非常多&#xff0c;我几乎没有触…
阅读更多...
【网络协议】

【网络协议】

网络协议 1 网络通讯1.1 防火墙1.2 子网掩码1.3 网关1.4 2 SSH2.1 SSH2.2 SSH12.3 SSH2 3 Telnet4 Telnet/SSL5 NFS6 TFTP7 FTP8 SFTP9 HTTP10 HTTPS11 NAT12 加密 1 网络通讯 1.1 防火墙 所谓“防火墙”&#xff0c;是指一种将内部网和公众访问网(如Internet)分开的方法&…
阅读更多...
顶板事故防治vr实景交互体验提高操作人员安全防护技能水平

顶板事故防治vr实景交互体验提高操作人员安全防护技能水平

建筑业在我国各行业中属危险性较大且事故多发的行业&#xff0c;在建筑业“八大伤害”(高处坠落、坍塌、物体打击、触电、起重伤害、机械伤害、火灾爆炸及其他伤害)事故中&#xff0c;高处坠落事故的发生率最高、危险性极大。工地现场培训vr坠落体验利用虚拟现实技术还原各种情…
阅读更多...
[yarn]yarn异常

[yarn]yarn异常

一、运行一下算圆周率的测试代码&#xff0c;看下报错 cd /home/data_warehouse/module/hadoop-3.1.3/share/hadoop/mapreduce hadoop jar hadoop-mapreduce-examples-3.1.3.jar pi 1000 1000 后面2个数字参数的含义&#xff1a; 第1个1000指的是要运行1000次map任务 …
阅读更多...
大数据毕业设计选题推荐-超级英雄运营数据监控平台-Hadoop-Spark-Hive

大数据毕业设计选题推荐-超级英雄运营数据监控平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
论文阅读：PVT v2: Improved Baselines with Pyramid Vision Transformer

论文阅读：PVT v2: Improved Baselines with Pyramid Vision Transformer

来源&#xff1a;PVTv1 和PVTv2 链接&#xff1a;https://arxiv.org/pdf/2102.12122.pdf 链接&#xff1a;https://arxiv.org/pdf/2106.13797.pdf PVTv2是在PVTv1基础上&#xff0c;所以先介绍PVTv1 Pyramid Vision Transformer: A Versatile Backbone for Dense Prediction…
阅读更多...
最新文章

Copyright @ 2022~2023