提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、登录页面
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请求是我自己比较容易遗忘的地方