Mit der Popularität mobiler Geräte sind mobile Anwendungen zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Die Implementierung der Login-Funktion gehört zu den Grundfunktionen jeder Anwendung. In diesem Artikel stellen wir vor, wie Sie das Uniapp-Hybrid-Entwicklungsframework zum Implementieren der Anmeldefunktion verwenden.
uniapp ist ein hybrides Entwicklungsframework, das auf Vue.js basiert und den gleichen Codesatz für die Entwicklung von iOS, Android, H5 und Small verwenden kann Programme usw. Plattformanwendungen. Noch wichtiger ist, dass es auch lokale Verpackungs- und Cloud-Verpackungsfunktionen unterstützt, was die Effizienz der Anwendungsentwicklung und das Benutzererlebnis erheblich verbessern kann.
Der Prozess zum Implementieren der Anmeldefunktion ist ungefähr wie folgt:
Als nächstes werden wir den oben genannten Prozess Schritt für Schritt umsetzen.
Im Uniapp-Projekt wird die Schnittstelle durch Schreiben von Vue-Komponenten implementiert. Wir erstellen die Datei „Login.vue“ im Ordner „pages“ und schreiben den Code für die Anmeldeschnittstelle wie folgt:
<!-- Login.vue -->
<template>
<view class="container">
<view class="input-box">
<input v-model="username" type="text" placeholder="用户名">
</view>
<view class="input-box">
<input v-model="password" type="password" placeholder="密码">
</view>
<view class="btn-wrapper">
<button @click="handleLogin">登录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
/* 登录验证 */
}
}
}
</script>
<style>
/* 样式 */
</style>Im obigen Code verwenden wir die von uniapp bereitgestellte Vue-Komponente und einige einfache Stile Erstellen Sie die Anmeldeschnittstelle. Wir definieren das Eingabefeld und die Anmeldeschaltfläche und rufen die Methode handleLogin auf, wenn auf die Anmeldeschaltfläche geklickt wird.
In uniapp ist vuex das Tool zum Verwalten des Bewerbungsstatus. Sie müssen zunächst einen Store-Ordner im Projekt erstellen (sofern dieser nicht vorhanden ist) und die Datei index.js unter dem Store-Ordner erstellen. Als Nächstes definieren wir den Status und die Vorgänge des Benutzers in index.js:
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: null, // 用户信息
isLogin: false // 是否登录
},
mutations: {
setUserInfo(state, userInfo) {
state.userInfo = userInfo
},
setIsLogin(state, isLogin) {
state.isLogin = isLogin
}
},
actions: {
login({ commit }, userInfo) {
/* 登录验证 */
},
logout({ commit }) {
/* 退出登录 */
}
}
})
export default storeIm obigen Code verwenden wir zunächst das Vuex-Plug-In über die Methode Vue.use() und definieren dann den Store Objekt. Im Store-Objekt verwenden wir die Grundkonzepte von Vue.js wie Status, Mutationen und Aktionen. Der Status wird verwendet, um den Status der Anwendung zu speichern, Mutationen werden verwendet, um den Status zu ändern, und Aktionen werden verwendet, um Mutationen zu übermitteln. Wir haben zwei Zustände definiert: userInfo und isLogin, die dazu dienen, Benutzerinformationen zu speichern bzw. ob der Benutzer angemeldet ist. Als nächstes definieren wir zwei Vorgänge: Anmelden und Abmelden. Bei diesen Vorgängen handelt es sich um Änderungen und Unterwerfungen an den Staat.
Als nächstes müssen wir die Anmeldeüberprüfungslogik implementieren. In Aktionen definieren wir die Anmeldemethode. Bei dieser Methode können wir einen asynchronen Vorgang durchführen, um den Server zur Überprüfung aufzufordern.
// store/index.js
actions: {
async login({ commit }, userInfo) {
const res = await uni.request({
url: 'http://api.example.com/login',
method: 'POST',
data: userInfo
})
if(res.data.code === 0) {
// 登录成功
const userInfo = res.data.userInfo
// 更新本地存储信息
uni.setStorageSync('userInfo', userInfo)
// 更新Vuex状态
commit('setUserInfo', userInfo) // 存储用户信息
commit('setIsLogin', true) // 修改登录状态
} else {
// 登录失败
uni.showToast({
title: '登录失败',
icon: 'none'
})
}
}
}Bei der Anmeldemethode senden wir zunächst eine POST-Anfrage über die uni.request-Methode an den Server und übergeben die Benutzerinformationen. Nachdem wir Feedback vom Server erhalten hatten, haben wir ein einfaches Urteil gefällt. Wenn die Anmeldeüberprüfung erfolgreich ist, werden die vom Server zurückgegebenen Benutzerinformationen im lokalen Cache gespeichert und die Benutzerinformationen und der Anmeldestatus in vuex werden aktualisiert. Wenn die Überprüfung fehlschlägt, wird eine entsprechende Meldung angezeigt.
In der Datei store/index.js definieren wir auch die Abmeldemethode, um das Abmeldeverhalten des Benutzers zu verwalten:
// store/index.js
actions: {
// ...省略上文中的代码
async logout({ commit }) {
// 清除本地缓存信息
uni.removeStorageSync('userInfo')
// 清除App Store
commit('setUserInfo', null)
commit('setIsLogin', false)
}
}// main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
// 全局路由钩子
uni.$on('routeUpdate', function() {
uni.getStorage({
key: 'userInfo',
success: function(res) {
// 用户已登录，更新Vuex状态
store.commit('setIsLogin', true)
store.commit('setUserInfo', res.data)
},
fail: function() {
// 用户未登录，跳转到登录页
if(uni.getStorageSync('isLogin') !== 'true' && uni.getStorageSync('isLogin') !== true) {
uni.navigateTo({
url: '/pages/Login'
})
}
}
})
})Das obige ist der detaillierte Inhalt vonUniapp-Hybridentwicklung zur Implementierung der Anmeldefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
js-Methode zum Löschen des Knotens
So konfigurieren Sie den virtuellen JSP-Speicherplatz
Kostenloser Quellcode für persönliche Websites
So öffnen Sie Bereichsberechtigungen
Befehlstyp für den Linux-Neustart
Der Unterschied zwischen vscode und Visual Studio
Überprüfen Sie die Portbelegungsfenster
Was sind die Vorteile der Mongodb-Datenbank?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
