uniapp点击按钮进行登录

在template中加载组件

1.通过定义用户名和密码

<view class="content start-bg">

<image class="bg-image"></image>

<view class="uni-padding-wrap uni-common-mt login-area">

<view class="uni-flex uni-row login-row">

<view class="text" style="-webkit-flex: 1;flex: 1;">

<input class="uni-input" placeholder-class="uni-input-placeholder" type="text"

placeholder="请输入用户名" v-model="username">

</view>

</view>

<view class="uni-flex uni-row login-row">

<view class="text" style="-webkit-flex: 1;flex: 1;">

<input class="uni-input" placeholder-class="uni-input-placeholder" type="password"

placeholder="请输入密码" v-model="password"

password="true">

</view>

</view>

</view>

<view class="btn-area">

<button class="btn-login" href="javascript:;" @click="login">登录</button>

</view>

</view>

在script中定义

username: '',

password: '',

cid: ''

2.在调用接口的时候,通过token判断,若浏览器中返回token值就跳转到首页,否则跳转到登录页

login() {

var _self = this;

uni.request({

url: getApp().globalData.server_ip + '/api/login', //登录(key-value)。

data: {

account: _self.username,

password: _self.password,

deviceToken: "121"

},

method: "POST",

header: {

'content-type': 'application/x-www-form-urlencoded', // 对应后台key-value传值

},

success: (res) => {

if (res.data.code == 20000) {

// 成功后,将用户信息存储到本地

uni.setStorage({

key: 'user_info',

data: res.data,

success: function() {

uni.redirectTo({

url: 'shouye',

})

}

});

} else {

uni.showToast({

title: res.data.message,

position: 'bottom'

});

}

},

});

},

}

其中style的样式

template {

height: 100%;

width: 100%;

}

.start-bg {

background-color: #FFFFFF;

width: 100%;

height: 100%;

}

.bg-image {

width: 100%;

height: 509rpx;

}

.content {

display: flex;

flex-direction: column;

align-items: center;

}

.login-area {

width: 80%;

margin-left: 10%;

}

.login-label-text {

font-family: AdobeHeitiStd-Regular;

font-size: 25rpx;

font-weight: normal;

font-stretch: normal;

letter-spacing: 0px;

color: #a1a1a1;

text-align: center;

}

.login-label-icon {

text-align: center;

}

.login-input {

float: left;

vertical-align: bottom;

width: 100%;

}

.uni-input-placeholder {

font-size: 25rpx;

color: #c2bebe;

}

.btn-area {

margin-top: 100rpx;

display: flex;

justify-content: center;

}

.btn-login{

background-color: #4da2ff;

border-radius: 49px;

color: #FFFFFF;

width: 616rpx;

height: 100rpx;

line-height: 100rpx;

text-align: center;

vertical-align: middle;

}

</style>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容