ElementUI+Vue 实现简单登录
Element-Ui+vue实现简单登录
·
前言
当前流行的elementui 与vue结合
国内目前唯一一个真正推向国际的Vue生态UI框架
提示：以下是本篇文章正文内容，下面案例可供参考
一、elementui和bootstrap区别
● element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
● Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
element-ui不是基于bootstrap实现的，他们是两套不同的ui框架。但是他们都提供组件
这些组件是我们开发中经常要用到的，自己使用系统原生的远远满足不了需求，二次开发不仅麻烦，而且难度大。使用这些ui框架可以大大降低开发难度。
用element-UI做底层UI框架有一定的约束，不过改动起来也比较简单，想怎么改就怎么改
二、项目效果
三、详细代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/student/elementUI/index.css">
<script type="text/javascript" src="/student/vue/vue.js"></script>
<script type="text/javascript" src="/student/elementUI/index.js"></script>
<script type="text/javascript" src="/student/boostrap/js/axios.min.js"></script>
<script type="text/javascript" src="/student/qs/qs.js"></script>
</head>
<body style="background-image: url(images/bg.jpg);">
<div id="loginbody">
<div class="logindata">
<el-form :model="form" status-icon :rules="rules" ref="loginForm" label-width="80px" class="login-box">
<div class="logintext">
<h2>用户登录</h2>
</div>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username" clearable></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password" clearable show-password></el-input>
</el-form-item>
<div class="tool">
<div class="rem">
<el-checkbox v-model="checked" @change="remenber">记住密码</el-checkbox
>
</div>
<div>
<span class="shou" @click="forgetpas">忘记密码？</span>
</div>
</div>
<div class="butt">
<el-button type="primary" @click="onSubmit('loginForm')" :loading="logining">登录</el-button>
<el-button class="shou" @click="register">注册</el-button>
</div>
</el-form>
</div>
</div>
<script>
let qs = Qs;
new Vue({
el: "#loginbody",
props: {
msg: String
},
data() {
return {
logining: false,
form: {
username: '',
password: '',
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
username: [
{required: true, message: '账号不可为空', trigger: 'blur'},
{max:10,message: "不能大于10个字符",trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'},
{max:16,message: "不能大于16个字符",trigger:'blur'}
]
}
}
},
methods: {
// greet: function (event) {
// // `this` 在方法里指向当前 Vue 实例
// alert('Hello ' + this.name + '!')
// // `event` 是原生 DOM 事件
// if (event) {
// //alert(event.target.tagName)
// }
// },
onSubmit(form) {
var that = this;
axios.interceptors.request.use((req) => {
if (req.method === 'post') {
req.data = qs.stringify(req.data);
}
return req;
}, (error) => Promise.reject(error));
// 为表单绑定验证功能
this.$refs[form].validate((valid) => {
this.logining = true,
setTimeout(()=>{
this.dialogVisible=true
//关闭加载按钮
this.logining=false
},2000)
if (valid) {
// var username = that.form.username;
// var password = that.form.password;
// let postData = qs.stringify({
// username:username,
// password:password
// })
// var instance = axios.create({ headers:
// {'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'}
// });
//发生ajax请求
axios.post('/student/login', {
username:that.form.username,
password:that.form.password
})
.then(function (response) {
//页面跳转
// console.log(that.form.username)
// console.log(response.data.name)
// console.log(response.data);
// console.log(that.form.username==response.data.name)
//console.log(that.form.password)
//console.log(response.data.pwd)
//console.log(that.form.username==response.data.name&&that.form.password==response.data.pwd)
if(that.form.username==response.data.name){
location.href="userinfo.html";
//存到本地存储
localStorage.setItem("username",that.form.username);
//localStorage.getItem()
}else {
alert("你输入的账户或密码错误,请重新输入")
}
})
.catch(function (error) {
console.log(error);
});
} else {
//console.log('error submit!!');
return false;
}
});
},
//记住密码
remenber(data){
// this.checked=data
// if(this.checked){
// localStorage.setItem("news",JSON.stringify(this.form))
// }else{
// localStorage.removeItem("news")
// }
},
//忘记密码
forgetpas() {
this.$message({
type:"info",
message:"功能尚未开发额😥😢",
showClose:true
})
},
//注册
register() {},
}
})
</script>
<style scoped>
#loginbody {
width: 100%;
height: 100%;
min-width: 1000px;
background-size: 100% 100%;
background-position: center center;
overflow: auto;
background-repeat: no-repeat;
position: fixed;
line-height: 100%;
padding-top: 150px;
}
.logintext {
margin-bottom: 20px;
line-height: 50px;
text-align: center;
font-size: 30px;
font-weight: bolder;
color: white;
text-shadow: 2px 2px 4px #000000;
}
.logindata {
width: 400px;
height: 300px;
transform: translate(-50%);
margin-left: 50%;
}
.tool {
display: flex;
justify-content: space-between;
color: #606266;
}
.rem{
margin-left: 80px;
}
.shou {
cursor: pointer;
color: #606266;
}
.butt {
margin-top: 10px;
text-align: center;
}
</style>
</body>
</html>
由于
axios.post('/student/login', { username:that.form.username, password:that.form.password })一个Request Payload返回给后台导致后台接收的数据为空，所有就要引入qs，这样发送给后台时就是Format Data格式了。
同时发送POST请求时浏览器产生两次请求，第一次为OPTIONS，第二次是真正的POST请求，后台接收不到参数。
非GET请求，会先发送OPTIONS进行预检（预检请求每次运行只发生一次）致使后台接收不到参数值，不停返回参数错误。
解决方案
改为简单请求（使用form格式提交数据）
//用户注册
var url ="/api/OfferReward/User/ValidateCode";
var instance = axios.create({ headers:
{'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'}
});
instance.post(url,qs.stringify(tel)).then(res => {
if(res.status === 200){
if (res.data.status === 0) {
console.log(res.data.msg);
} else {
console.log(res.data.msg);
return false;
}
}
})
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)