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

前言

     作为一个刚入门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 未登录，我们就在跳到登陆页让他登陆。

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue