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

 运行效果