10.开发newapp的登录功能login

【10.开发newapp的登录功能login】风流不在谈锋胜，袖手无言味最长。这篇文章主要讲述10.开发newapp的登录功能login相关的知识，希望能为你提供帮助。
1.设置是否已经登录的验证 1.在newapp/pages/center/center.vue中：

< template> < view class="content"> < /view> < /template> < script> export default { data() { return {} }, methods: { isLogin(){ let token=uni.getStorageSync(\'token\'); if(token){ console.log(\'已登录\') }else{ uni.navigateTo({url:\'/pages/login/login\'}) } }}, onShow() { this.isLogin() } } < /script> < style> < /style>

2.在newapp/pages/me/me.vue中：

< template> < view> < /view> < /template> < script> export default { data() { return {} }, methods: { isLogin(){ let token=uni.getStorageSync(\'token\'); if(token){ console.log(\'已登录\') }else{ uni.navigateTo({url:\'/pages/login/login\'}) } } }, onShow() { this.isLogin() } } < /script> < style> < /style>

2.在后端项目中开发小程序用户登录的api 1.NewCenter/apps/user_operations/views.py：

from django.shortcuts import render,HttpResponse from rest_framework.views import APIView,Response from users.models import PianQu,UserProfile from users.serializers import PianQuModelSerializer,UserProfileModelSerializer from .models import Notice from .serializers import NoticeModelSerializer import json,time,hashlib# Create your views here.#……class UserLoginView(APIView): """小程序端用户登录""" def post(self, request): pwd=request.data.get(\'pwd\') tel=request.data.get(\'tel\') if pwd and tel: user = UserProfile.objects.filter(mobile=tel,password=pwd).first() if user: # 生成token now_time=str(int(time.time())) word=user.mobile+now_time token=hashlib.sha256(word.encode("utf-8")).hexdigest() # print(token) user.token=token user.save() re=UserProfileModelSerializer(user) result = {"status": "200", "data":{\'info\':re.data,\'token\':token} } else: result = {"status": "403", "data": {\'msg\': \'电话或密码错误。\'}} else: result = {"status": "404", "data": {\'msg\': \'未收到足够参数。\'}} return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8")

2.NewCenter/apps/user_operations/urls.py：

from django.urls import path from .views import GetPianQuBannerView,GetNoticeListView,UserLoginViewurlpatterns = [ path(\'getbanner/\',GetPianQuBannerView.as_view()),#手机端获取banner图 path(\'getnoticeclist/\',GetNoticeListView.as_view()),#获取公告列表 path(\'userlogin/\',UserLoginView.as_view()),#小程序用户登录 ]

3.在xadmin后台，输入几个实验用户数据
（前面填入过）
3.在uni-app端newapp/pages/login/login.vue中：

< template> < view class="content"> < view class="padding-xl radius shadow-warp bg-white margin-top"> < view class="cu-form-group"> < view class="title"> 手机：< /view> < input placeholder="手机号" v-model="tel"> < /input> < /view> < view class="cu-form-group"> < view class="title"> 密码：< /view> < input placeholder="密码" v-model="pwd"> < /input> < /view> < /view> < view class="padding flex flex-direction"> < button class="cu-btn bg-green margin-tb-sm lg" @tap="goLogin" data-target="Modal"> 登录< /button> < /view> < view class="cu-modal" :class="modalName==\'Modal\'?\'show\':\'\'"> < view class="cu-dialog"> < view class="cu-bar bg-white justify-end"> < view class="content"> 错误提示：< /view> < view class="action" @tap="hideModal"> < text class="cuIcon-close text-red"> < /text> < /view> < /view> < view class="padding-xl"> {{title}} < /view> < /view> < /view> < /view> < /template> < script> import {host,get,post} from \'@/commons/post_and_get.js\'; export default { data() { return { modalName: null, title:\'请输入正确的手机号和密码\', tel:\'\', pwd:\'\',} }, methods: { showModal(e) { this.modalName = e.currentTarget.dataset.target }, hideModal(e) { this.modalName = null }, async goLogin(e){ if(this.tel & & this.pwd){ if(this.tel.length==11){ console.log(\'提交登录数据\') let re=await post(\'/user_operations/userlogin/\',{\'tel\':this.tel,\'pwd\':this.pwd}) console.log(re) if(re.status==200){ console.log(\'登录成功\') uni.setStorageSync(\'token\' , re.data.token); uni.setStorageSync(\'info\' , re.data.info); uni.switchTab({url: \'/pages/me/me\'}); }else{ this.title=re.data.msg this.showModal(e) } }else{ this.showModal(e) } }else{ this.showModal(e) } }} } < /script> < style> .content{ margin-top: 200upx; } < /style>

运行效果