vue 写的登录页面

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、登录页面？
• 二、使用步骤
  • 1.引入库

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、登录页面

1、用element ui或者用iView组件都可以

我用了 element ui

效果图：

二、使用步骤

1.引入库

代码如下（示例）：引入element ui

npm i element-ui -S                                                                                                 

2.代码

代码如下（示例）：

 

<template>
    <div class="container">
        <div class="login">
            <div class="item">
                <h2>设备在线系统</h2>
            </div>
            <div class="item">
                <span>账号：</span>
                <form><el-input size="mini"  type="text" v-model="loginForm.account" placeholder="请输入账号"></el-input></form>
            </div>
            <div class="item">
                <span>密码：</span>
                <form><el-input size="mini" type="password"  v-model="loginForm.password" placeholder="请输入密码"></el-input></form>
            </div>
            <div class="item">
                <span>记住我：</span>
               <form><el-checkbox :v-model="loginForm.checked"></el-checkbox></form>
               <!-- <a href="zhuce" style="color:red;margin-left: 130px;">注册</a> -->
            </div>
            <div class="item">
                <span></span>
                <el-button size="mini" type="primary" @click="login()">登录</el-button>
                <el-button size="mini">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>
//引入axios
import axios from 'axios'
// import { reactive } from 'vue'
import { mapMutations } from 'vuex'
// import { setToken } from " @/ultils/token";
export default {
name: 'loginPage',
data () {
return {
//定义登录的表单数据
  loginForm: {
    //登录登录账号
    account: '',
    //密码
    password: ''
  },
  checked: false

}
},
methods: {
...mapMutations(['changeLogin']),
//登录点击触发的方法
login () {
  //定义登录登录账号获取表单中的登录登录账号并把他赋值给前面的
  var account = this.loginForm.account;
  var password = this.loginForm.password;
    //判断登录账号是否为空
  if (account == '') {
    alert('请输入账号');
    return false;
  }
  if (password == '') {
    alert('请输入密码');
    return false;
  }
    //发送axios请求  通过当前输入的登录账号和密码拼接是否正确
  axios.post('http://192.168.0.12:8080/sbzx/login.action?account=' + account + '&password=' + password).then((res) => {
    //  console.log(res);
    // const data = res.data;
    console.log(res.data);
    // 成功后跳转到homepage页面
    this.$router.push({path: '/homepage'})
  })
}
}

}
</script>
<style lang="scss" scoped>
.container{
width: 100vw;
height: 100vh;
//背景渐变色
background:linear-gradient(to bottom, rgb(13, 40, 58),lightblue);
display: flex;
justify-content: center;
align-items: center;
    .login{
        width: 350px;
        // height: 200px;
        border: 1px solid #eee;
        border-radius: 6px;
        color:#eee;
        padding: 10px;
    }
}
.item{
font-size: 14px;
display: flex;
align-items: center;
margin: 10px 0;
h2{
    flex: 1;
    text-align: center;
}
span{
    width: 90px;
    text-align: right;
}

}
</style>

---

总结

发送axios请求是我自己比较容易遗忘的地方