上次我們說了關於跳轉頁面與顯示數據的一些事
這次我們來聊一聊用戶登錄與註冊的一些事
閒話少說先上代碼
登錄頁：
xxx.wxml
<view class="login">
<image class="avatar" style="" mode="" src="../../images/3.png" binderror="" bindload=""></image>
<view class="doc-title zan-hairline--bottom"></view>
<view class="username">
<text>用戶名</text>
<input placeholder="用戶名" type="text" bindinput="usernameinput"/>
</view>
<view class="password">
<text>密碼</text>
<input placeholder="密碼" type="password" bindinput="passwordinput"/>
</view>
<view class="signin">
<button type="submit" catchtap="signin">登錄</button>
<button type="submit" catchtap="register">註冊</button>
</view>
</view>
xxx.js
Page({
data: {
username: "",
password: "",
},
usernameinput: function (e) {
this.setData({
username: e.detail.value
})
},
passwordinput: function (e) {
this.setData({
password: e.detail.value
})
},
//點擊登陸的時候觸發的事件
signin: function () {
var that = this;
//登陸的時候要傳過來的參數
var name = that.data.username
var pwd = that.data.password
if (that.data.username == "") {
wx.showModal({
title: "信息提示",
content: "用戶名不能爲空!"
})
} else if (that.data.password == "") {
wx.showModal({
title: "信息提示",
content: "請輸入密碼!"
})
}
console.log("用戶名：" + name + "密碼：" + pwd)
//發送ajax請求到服務器-登錄
wx.request({
url: 'http://localhost:8080/Weixinapp/user/login.do',
data: {
name: name,
pwd: pwd,
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默認值
},
method: 'POST',
dataType: 'json',
success: function (res) {
// console.log("成功")
// console.log("返回的結果"+JSON.stringify(res.data.msg))
// console.log("返回的結果" + JSON.stringify(res.data.status))
var status = JSON.stringify(res.data.status)
var msg = JSON.stringify(res.data.msg)
//彈出提示
wx.showModal({
title: "信息提示",
content: msg
})
if (status == 0){
// console.log(status)
//跳轉到index頁面
wx.switchTab({
url: '../index/index',
})
}
},
fail: function (res) {
wx.showToast({
title: '服務器網絡錯誤,請稍後重試',
icon: 'loading',
duration: 1500
})
},
complete: function (res) {
},
})
},
//點擊註冊的時候觸發的事件
register: function () {
wx.navigateTo({
url: "register/register"
})
}
})
![]()
這裏註冊的頭像沒有粘出可以根據需要自定義頭像，這裏就不做太多介紹
這裏註冊的頭像沒有粘出可以根據需要自定義頭像，這裏就不做太多介紹這裏注意前後臺都應該校驗一會用戶名和密碼，前臺校驗的已經給出，具體後臺校驗的步驟大家自行發揮.這裏插一句本人是寫後臺的，這裏貼出的代碼是最近寫前臺時遇到的問題及解決方法-跑題了，言歸正傳
接下來是註冊的代碼：
xxx_regist.wxml:
<view class="login">
<image class="avatar" style="" mode="" src="../../../images/3.png" binderror="" bindload=""></image>
<view class="doc-title zan-hairline--bottom"></view>
<view class="username">
<text>用戶名</text>
<input placeholder="用戶名" type="text" bindinput="usernameinput"/>
</view>
<view class="password">
<text>密碼</text>
<input placeholder="密碼" type="password" bindinput="passwordinput"/>
</view>
<view class="passwordconfirm">
<text>密碼確認</text>
<input placeholder="密碼確認" value="" type="password" bindinput="passwordconfirminput" />
</view>
<view class="signin">
<button type="submit" catchtap="signin">註冊</button>
</view>
</view>
xxx_regist.js:
xxx_regist.js:
Page({
data: {
username: "",
password: "",
passwordconfirm: ""
},
usernameinput: function (e) {
this.setData({
username: e.detail.value
})
},
passwordinput: function (e) {
this.setData({
password: e.detail.value
})
},
passwordconfirminput: function (e) {
this.setData({
passwordconfirm: e.detail.value
})
},
signin: function () {
var that = this;
//請求的時候需要提交的參數
var name = that.data.username
var pwd = that.data.password
// console.log("js中收到的用戶名："+name+"，密碼："+pwd)
//發送ajax請求將用戶註冊信息傳遞過去進行註冊
wx.request({
url: 'https://qichuang.mynatapp.cc/Weixinapp/user/regist.do',
data: {
name: name,
pwd: pwd
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默認值
},
method: "POST",
dataType:"json",
success: function (res) {
// console.log("成功")
console.log("響應的數據"+res.data)
// if (res.name == username) {
// wx.showModal({
// title: "信息提示",
// content: "該用戶名已被註冊"
// })
// } else {
// wx.showModal({
// title: "信息提示",
// content: "註冊成功，請等待審覈通過"
// }),
// wx.switchTab({
// url: "../../myself/myself"
// })
// }
},
fail: function(res){
wx:wx.showToast({
title: '服務器網絡錯誤,請稍後重試',
icon: 'loading',
duration: 1500,
})
},
complete: function(res){
}
})
if (that.data.username == "") {
wx.showModal({
title: "信息提示",
content: "用戶名不能爲空!"
})
} else if (that.data.password == "") {
wx.showModal({
title: "信息提示",
content: "請輸入密碼!"
})
} else if (that.data.passwordconfirm == "") {
wx.showModal({
title: "信息提示",
content: "請確認密碼!"
})
} else if (that.data.passwordconfirm != that.data.password) {
wx.showModal({
title: "信息提示",
content: "兩次密碼輸入不一致!"
})
}
}
})
![]()
要注意的是無論登錄還是註冊用的請求都是ajax請求的方式，微信小程序中的請求
基本都是ajax實現的這裏要注意
基本實現方式與Web工程基本相似，希望可以給大家做個參考，謝謝
要注意的是無論登錄還是註冊用的請求都是ajax請求的方式，微信小程序中的請求
基本都是ajax實現的這裏要注意
基本實現方式與Web工程基本相似，希望可以給大家做個參考，謝謝