用uniapp写一个登录注册功能,代码需要有注释
时间: 2024-06-08 17:07:52 浏览: 19
好的,以下是用uniapp写一个登录注册功能的代码,已经加上注释:
```
<template>
<div>
<form>
<h2>登录</h2>
<div>
<label>账号:</label>
<input type="text" v-model="loginAccount" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="loginPassword" />
</div>
<button type="submit" @click.prevent="login">登录</button>
</form>
<form>
<h2>注册</h2>
<div>
<label>账号:</label>
<input type="text" v-model="registerAccount" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="registerPassword" />
</div>
<div>
<label>重复密码:</label>
<input type="password" v-model="repeatPassword" />
</div>
<button type="submit" @click.prevent="register">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
loginAccount: '',
loginPassword: '',
registerAccount: '',
registerPassword: '',
repeatPassword: ''
}
},
methods: {
login() {
// 发送登录请求
uni.request({
url: 'http://example.com/login',
method: 'POST',
data: {
account: this.loginAccount,
password: this.loginPassword
},
success: res => {
if (res.data.success) {
// 登录成功后的处理
uni.showToast({
title: '登录成功'
})
} else {
uni.showToast({
title: '账号或密码错误'
})
}
}
})
},
register() {
// 判断两次输入的密码是否相同
if (this.registerPassword !== this.repeatPassword) {
uni.showToast({
title: '两次输入的密码不相同'
})
return
}
// 发送注册请求
uni.request({
url: 'http://example.com/register',
method: 'POST',
data: {
account: this.registerAccount,
password: this.registerPassword
},
success: res => {
if (res.data.success) {
// 注册成功后的处理
uni.showToast({
title: '注册成功'
})
} else {
uni.showToast({
title: '注册失败'
})
}
}
})
}
}
}
</script>
<style scoped>
form {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
label {
display: inline-block;
width: 80px;
text-align: right;
}
input {
display: inline-block;
height: 30px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
display: block;
margin: 20px auto 0;
height: 40px;
width: 100px;
background-color: #409EFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
```
这段代码实现了一个简单的登录注册功能,包含了输入账号和密码,发送请求进行登录或注册,以及对登录和注册结果进行反馈。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)