vue入门者uni-app开发之---入坑

2023-11-06

前言

     作为一个刚入门vue的前端。我们公司主要运营公众号网页,之前一直用的jq,发现用户体验差的一匹,后来公司决定将前端技术栈定为vue,于是呼,我去学习了vue,然后在vue官网上看到了uni-app,之前也有听说过uni-app,然后发现uni-app能开发h5,还能开发app,小程序,基本一套代码解决7端,一看到这里,对于我这种懒鬼,有这么好用的框架,我就爱上了uni-app。

起步

现阶段我只开发微信公众号的网页版,也就是开发uni-app的h5版

项目结构

在这里插入图片描述
使用uni-app好处就是不用去管脚手架和路由,hbuilder自动搭建,直接用就行了很方便,很舒服。

开始开发

一般我们用uni-app 是用来开发 h5 ,app,小程序
uni-app插件市场有好多的集成组件,比较简单的有 colorUi 稍微复杂一点的有 uView ;我所使用的是uView
在这里插入图片描述
在这里插入图片描述
把uview下载到项目中,然后全局引用,这里附上uview官方文档链接
具体操作请以官方为准

举例登陆全局保持状态

在这里插入图片描述
首先在app.vue中判断,是否有缓存用户的token,有的话证明是登陆过的,无需再登陆没有的话,立即跳转到登陆页面
this.tui.getToken,是我调用的封装好的判断是否保持过token的方法getToken方法getToken方法
在这里插入图片描述

这里是跳转登陆页面
在这里插入图片描述
在这里插入图片描述
这里是登陆函数,先验证手机号是否为11位,密码长度是否大于6,然后请求后端登陆
在这里插入图片描述
登陆成功后端把用户唯一身份所需信息token发给我,这个相当于个人身份证,你只有带上这个token去发出请求,后端才知道发出这个请求的是谁,有没有权限请求这个接口。

在这里插入图片描述
登陆成功后将token保存在本地
在这里插入图片描述
request.js 是将请求进行封装,具体uview ,thorui , 都有看详细文档我在这里不过多解释,
在这里插入图片描述

没次发送请求时都带上你刚刚登陆成功后拿到的token,用于后端判断身份信息
在这里插入图片描述
这里是做统一的请求拦截,比如说后端返回的code码是
251说明是未登录或者登陆失效,提示用户后跳转到登陆页面
261是后端拒绝了这次请求,也把信息提示给用户。

退出登陆

在这里插入图片描述
在个人账号页面设置退出登陆按钮
在这里插入图片描述
点击退出按钮提示用户确定退出吗,同意就清除本地token退出成功。没有了token下次请求任何有权限的接口后端都会返回251 未登录,我们就在跳到登陆页让他登陆。

登陆就这么个流程,全是我自己写可能有点菜,但是也试用与百分之九十的移动端登陆逻辑,望大佬指点。。。。。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue入门者uni-app开发之---入坑 的相关文章

  • fill填充函数解析及用法示例

    fill填充函数解析及用法示例 fill x y color 其中x y是填充的范围 color是填充的颜色 1 对x y范围的获取 示例 所以可以得出x 0 1 1 0 y 0 0 1 1 示例代码如下 画一个填充图形 思路 首先需要得到
  • vue3.0通信方式之 Ref

    Ref通信方式 父传子 子传父 父传子
  • 鸿蒙石之鉴流程,鸿蒙石之鉴完全攻略!

    现在小肥皂给大家说说日常神器任务之鸿蒙石之鉴攻略及成就攻略 这是唯一一个起神器可以获得两个及以上五宝的神器 1 在长安传令天兵处领取任务 2 领取任务后来到傲来进行第一场战斗 封印法弟子是天宫会错乱封人 雷霆法弟子是天宫会雷霆万钧 五雷法弟
  • 栈的最小值

    请设计一个栈 除了常规栈支持的pop与push函数以外 还支持min函数 该函数返回栈元素中的最小值 执行push pop和min操作的时间复杂度必须为O 1 示例 MinStack minStack new MinStack minSta
  • utf8字符串转gb2312代码

    因iconv方法有些编译器不支持 则采用下面映射方法 完全代码参考 https download csdn net download weixin 55163060 84566848 unsigned short giGB2312 2124
  • 173.CI/CD(一):gitlab配置,jenkins的安装配置,jenkins实现基础的CI/CD,Sonarqube代码质量检测,Harbor镜像仓库

    目录 一 容器化持续集成的基础概念 1 敏捷开发 持续集成 持续交付 DevOps区别 2 为什么需要持续集成 3 如何设计持续集成流水线 4 什么是持续部署 1 概念 2 要素 3 常见自动化部署方法 4 如何测试部署的效果 5 项目进度

随机推荐

  • ACE日志系统之本机日志系统的多文件实现

    在文章 lt
  • Qt5入门系列之自关联槽函数与手动关联槽函数

    Qt5入门系列之自关联槽函数与手动关联槽函数 1 自关联槽函数 自关联函数适用于关系唯一且功能普通的的sender与槽函数的调用中 操作步骤 1 在 ui文件中选中sender右击 点击 转到槽 来到 cpp文件中 2 在自动生成的槽函数名
  • 6. JVM调优工具详解及调优实战

    JVM性能调优 1 前置启动程序 1 1 Jmap 1 1 1 Jmap查询内存信息 1 1 2 Jmap查询堆信息 1 1 3 jmap查询堆内存dump 1 2 Jstack 1 3 远程连接jvisualvm 1 4 jstack找出
  • 关于使用JSch连接sftp服务器引发的异常

    异常信息 com jcraft jsch JSchException Session connect java io IOException End of IO Stream Read at com jcraft jsch Session
  • vscode调用keil-MDK编译程序

    vscode的确很强大 很多人为它贡献插件 之前看过很多使用Vscode进行STM32开发的文章配置都好麻烦复杂 像我这种怕麻烦的就不想搞 就只能用vscode编辑程序 再切换到keil编译程序 比较麻烦些 然而这个痛点已经被一个dalao
  • STC89C51学习笔记-报错1:main.c(10): warning C206: ‘Delay500ms‘: missing function-prototype

    1 问题描述 报错信息 main c 10 warning C206 Delay500ms missing function prototype 在编写简单的LED闪烁程序时 编译程序出现以上错误提示 程序代码如下 include
  • OpenCV读取摄像头图像并实时显示

    我们直接上代码吧 import numpy as np import cv2 cap cv2 VideoCapture 0 0 选择笔记本电脑自带参数 1 为USB外置摄像头 print cap get 3 cap get 4 查看当前捕获
  • [ 常用工具篇 ] 渗透神器 whatweb 安装使用详解

    博主介绍 博主介绍 大家好 我是 PowerShell 很高兴认识大家 主攻领域 渗透领域 数据通信 通讯安全 web安全 面试分析 点赞 评论 收藏 养成习惯 一键三连 欢迎关注 一起学习 一起讨论 一起进步 文末有彩蛋 作者水平有限 欢
  • 境界的彼方_lduoj_bfs宽搜

    Description wyy是一个著名动画 境界的彼方 的男主 此时他非常的慌张 因为女主栗山未来进入了境界的彼方内部 并且花费了大量的血量去拯救wyy wyy此时也进入了境界的彼方 他妈给了他一张地图去寻找境界的彼方的核心去拯救女主 现
  • JavaScript的Math对象基本用法

    Math对象的基本用法 1 Math 对象用于执行数学任务 Math是一个内置对象 不需要创建 可以直接使用 2 Math对象常用API Math PI 返回圆周率3 1415926 Math ceil x
  • Acwing-顺时针打印矩阵

    顺时针定义好四个方向 按题目要求为右下左上 首先往右走 走到不能走为止 再往下走 走到不能走为止 再往左走 一直顺时针转圈的方式走 直到走满n m步 什么是不能走的情况 要么走出边界了 要么走的格子已经走过了 就这两种情况 class So
  • redis cluster 集群 安装 配置 详解

    Redis 集群是一个提供在多个Redis间节点间共享数据的程序集 redis3 0以前 只支持主从同步的 如果主的挂了 写入就成问题了 3 0出来后就可以很好帮我们解决这个问题 目前redis 3 0还不稳定 如果要用在生产环境中 要慎重
  • max 3485 使用方法详解

    芯片管脚介绍 1 1 1号引脚为RO 通常与MCU UART控制器的RX相连接 用于接收对端数据 1 2 2号引脚为RE RE对RO起控制作用 RE为低电平 RO可接收数据 RE为高电平时 RO不接收数据 1 3 3号引脚为DE DE对 D
  • C++ 开源协程库 libco——原理及应用

    1 导论 使用 C 来编写高性能的网络服务器程序 从来都不是件很容易的事情 在没有应用任何网络框架 从 epoll kqueue 直接码起的时候尤其如此 即便使用 libevent libev这样事件驱动的网络框架去构建你的服务 程序结构依
  • oracle数据库小结

    运用sqlplus连接数据库 sqlplus as sysdba 以系统用户 sqlplus username password 以普通用户登录 若忘记用户密码 则可以先以系统用户登录 然后运用alter user 用户名 identifi
  • abp执行mysql语句_ABP的Core2.0使用mysql数据,在使用linq语句报错了

    System InvalidOperationException HResult 0x80131509Message An exception occurred while reading a database value for prop
  • Android移动开发-使用OpenGL来绘制3D纹理图的实现

    OpenGL 全写Open Graphics Library 是指定义了一个跨编程语言 跨平台的编程接口规格的专业的图形程序接口 它用于三维图像 二维的亦可 是一个功能强大 调用方便的底层图形库 OpenGL是行业领域中最为广泛接纳的 2D
  • 『HTML&CSS』选择器(一)

    前面我们说过 CSS一共分为两大块 选择器和声明块 本篇博客主要对选择器进行一些简单的介绍 元素选择器 我们前面使用的都是元素选择器 通过元素选择器可以选择页面中的所有指定元素 语法 元素名 标签名 代码演示
  • 深度学习:Opencv的BlobfromImage如何工作

    深度学习 Opencv的BlobfromImage如何工作 1 原理 1 2 均值减法是什么 1 3 cv2 dnn BlogFromImage 2 源码 参考 想要从深度神经网络获取正确的预测 首先需要预处理数据 在深度学习 图像分类中
  • vue入门者uni-app开发之---入坑

    vue入门者uni app开发之 入坑 前言 起步 项目结构 开始开发 举例登陆全局保持状态 退出登陆 前言 作为一个刚入门vue的前端 我们公司主要运营公众号网页 之前一直用的jq 发现用户体验差的一匹 后来公司决定将前端技术栈定为vue