uni-app/thinkphp:用jwt实现登录之二:客户端uni-app(hbuilderx 3.6.18)-编程思维

一,代码:

1,login.nvue

<template>
    <view>
        <view style="margin-right: 60rpx;margin-left: 60rpx;margin-top: 60rpx;">
                <uni-forms ref="form" :modelValue="formData" :rules="rules">
                    <uni-forms-item label="手机号" name="mobile">
                        <uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入手机号" />
                    </uni-forms-item>
                    <uni-forms-item label="密码" name="code">
                        <uni-easyinput type="text" v-model="formData.code" placeholder="请输入密码" />
                    </uni-forms-item>
                </uni-forms>
                <button @click="loginSubmit">登录</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
              formData: {
                mobile: '',
                code: ''
              },
              rules: {
                // 对name字段进行必填验证
                mobile: {
                    rules: [{
                            required: true,
                            errorMessage: '请输入手机号',
                        },
                        {
                            minLength: 8,
                            maxLength: 11,
                            errorMessage: '手机号长度在 {minLength} 到 {maxLength} 个字符',
                        }
                    ]
                },
                // 对email字段进行必填验证
                code: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入正确的密码',
                    },
                        {
                            minLength: 6,
                            maxLength: 18,
                            errorMessage: '密码长度要求6-18个字符',
                        }
                    ]
                }
            }
            }
        },
        methods: {
                    loginSubmit() {
                        this.$refs.form.validate().then(res=>{
                            console.log('表单数据信息:', res);
                            this.login(this.formData.mobile,this.formData.code);
                        }).catch(err =>{
                            console.log('表单错误信息:', err);
                        })
                    },
                    login(mobile,code){
                        
                        let postData = {
                            mobile:mobile,
                            password:code,
                        }
            let url = '/auth/login';
            let urlLogin = getApp().$util.getUrlByEnvPlatform(process.env.NODE_ENV,getApp().globalData.platform,url);
            console.log("urlLogin:"+urlLogin);
            console.log(postData);
                        
                        uni.request({
                            url:urlLogin,
                            method:"POST",
                            data:postData,
                            dataType:'json',
                            header: {
                                     'Content-Type': 'application/x-www-form-urlencoded' 
                                    },
                            success:(res)=>{
                                if (res.data.code == 0) {
                                    console.log("获取数据成功");
                                    console.log(res.data);
                                    let token = res.data.data.token;
                                    console.log("token:"+res.data.data.token);
                                    uni.setStorage({
                                                      key:'token',
                                                      data:token,
                                                      success() {
                                                        //返回上一页
                                                        //uni.navigateBack();
                                                      }
                                                    });
                                    //登录成功后,跳转到个人页
                                    uni.switchTab({
                                        url:'../userinfo/userinfo',
                                    });
                                } else {
                                    console.log("网络出现问题");
                                    console.log(res);
                                }
                            } 
                        })
                    }
        },
    }
</script>

<style>

</style>

2,userinfo.nvue

<template>
    <view>
        {{status}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status:"未知",
            }
        },
        onShow() {
              console.log("开始执行onShow");
              //获取内容
              this.getUserInfo();
        },
        methods: {
              getUserInfo(){
                  let token = uni.getStorageSync('token') || '';
                  if (token == '') {
                      console.log("token不存在");
                      this.status = "用户未登录";
                  } else {
                      //地址
                      let url = '/auth/info';
                      let urlLogin = getApp().$util.getUrlByEnvPlatform(process.env.NODE_ENV,getApp().globalData.platform,url);
                      console.log("urlLogin:"+urlLogin);
                      //console.log(postData);
                      //访问接口,得到用户信息
                      uni.request({
                          url:urlLogin,
                          method:"GET",
                          data:{},
                          dataType:'json',
                          header: {
                                   'Content-Type': 'application/x-www-form-urlencoded',
                                  'Authorization': 'Bearer '+token
                                  },
                          success:(res)=>{
                              if (res.data.code == 0) {
                                  console.log("获取数据成功");
                                  console.log(res.data);
                                
                                if (res.data.data.userId > 0) {
                                    this.status = "用户已登录,Id:"+res.data.data.userId;
                                } else {
                                    this.status = res.data.data.status;
                                }
                              } else {
                                  console.log("网络出现问题");
                                  console.log(res);
                              }
                          } 
                      })
                  }
              },
        }
    }
</script>

<style>

</style>

说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取: https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明:作者:刘宏缔 邮箱: 371125307@qq.com

二,测试效果

三,查看hbuilderx的版本: 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/architectforest/p/17147191.html

socket.io实现简易聊天室功能-编程思维

本文简单介绍使用websocket实现一个简单的聊天室功能,我这里是用vite初始化的vue3项目。 在线体验地址:http://chat.lb0125.com/chat 需要安装的库: socket.io、socket.io-client等 1、代码 整体代码目录结构如下,分为客户端和服务端代码:   1.1、服务

php实现简单的学生信息管理系统(web版)-编程思维

(∩_∩)   1.概述   学了php的一些基础,包括HTML,php,pdo,mysql操作等,一直都没有将它们有机结合。最近写了一个简单的网页版学生信息管理系统,前台用HTML,脚本用到了JavaScript和PHP,数据库用到了MySQL。麻雀虽小,五脏俱全。算是对这些知识的一次总结吧。   2.源码   工程

php学习笔记之pdo-编程思维

1. 何为PDO?   PDO(PHP数据对象) 是一个轻量级的、具有兼容接口的PHP数据连接拓展,是一个PHP官方的PECL库,随PHP 5.1发布,需要PHP 5的面向对象支持,因而在更早的版本上无法使用。它所提供的数据接入抽象层,具有与具体数据库类型无关的优势,为它所支持的数据库提供统一的操作接口。目前支持的数据

php cookie处理函数-编程思维

(o゜▽゜)o☆[BINGO!] ok,我们先看看cookie是什么东东? cookie是服务器留在客户端的用于识别用户或者存储一些数据的小文件(注意,session存储在服务器端,这是两者的区别之一)。我们平时登录某门户时,会有选项“是否保存登录”或者“下次自动登录”,当我们勾选了之后,服务器就会在我们的浏览器创建c

laravel groupby 报错-编程思维

报错信息 laravel which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by 关闭严格模式: 修改 app/database.ph

php接入苹果支付-编程思维

Ios苹果支付流程: 客户端先从苹果获取内购Id。 客户端将内购id,金额、用户id等传给服务端获取一个自己服务端生成的订单号。 客户端向苹果发起支付。 支付成功后,客户端从本地拿支付凭证、将支付凭证和订单号、用户id等参数传给服务端;服务端拿支付凭证向苹果发起验证订单是否有效,然后将结果反馈给客户端。 客户端刷新用