前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >10.开发newapp的登录功能login

10.开发newapp的登录功能login

作者头像
玩蛇的胖纸
发布2020-06-22 16:28:35
5130
发布2020-06-22 16:28:35
举报

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,UserLoginView

urlpatterns = [
    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>

 运行效果

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.设置是否已经登录的验证
    • 1.在newapp/pages/center/center.vue中:
      • 2.在newapp/pages/me/me.vue中:
      • 2.在后端项目中开发小程序用户登录的api
        • 1.NewCenter/apps/user_operations/views.py:
          • 2.NewCenter/apps/user_operations/urls.py:
            • 3.在xadmin后台,输入几个实验用户数据
            • 3.在uni-app端newapp/pages/login/login.vue中:
            相关产品与服务
            云开发 CloudBase
            云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档