uniapp的登录注册用api实现
如果你有一些代码基础了,在我们刚开始学习 uni-app 时,建议先创建一个 uni-app 项目,先学习如何将项目运行起来,跟着课程一步步的填充代码,并看到实时展现出来的效果,这样会让我们学习和开发的过程更有趣更高效。与我们学习一门新的编程语言的思路一样,如果想要快速上手的话,我们不需要在刚开始学习的时候,就要弄清楚开发所需要的全部语法、组件等。这样会耗费掉我们大量的时间,并且没有实例的支撑,学
一、什么是API
API(Application Programming Interface,应用程序接口),就是软件系统不同组成部分衔接的约定。其主要目的是让应用程序开发人员得以调用一组例程功能,而无须考虑其底层的源代码为何、或理解其内部工作机制的细节。API本身是抽象的,它仅定义了一个接口,而不涉及应用程序在实际实现过程中的具体操作。
二、登录注册页面展示
三、代码功能实现
当前页面内容涉及到uni-forms
表单组件的使用, 通常用来做表单校验和提交。每一个 uni-forms-item
是它的一个表单域组件,用来承载表单具体内容,uni-forms-item
中可以嵌套 uni-easyinput
、uni-data-checkbox
和 uni-app
内置的表单组件。
四、校验规则
校验规则接受一个 Object
类型的值,通过传入不同的规则来表示每个表单域的值该如何校验
对象的 key
表示当前表单域的字段名,value
为具体的校验规则。
在使用uni-forms表单时的注意事项:
uni-forms表单校验的使用:
1.uni-forms
需要通过 rules
属性传入约定的校验规则
2.uni-forms需要绑定model属性,值为表单的key\value组成的对象。
3.uni-forms-item
需要设置 name属性为当前字段名,字段为String|Array类型。
4.只要使用的组件不管是内置组件还是三方组件,只需绑定v-model,无需其他操作,即可参与校验。
表单校验还可以直接通过 uniCloud web 控制台
快速根据 schema
自动生成表单维护界面,比如新建页面和编辑页面,自动处理校验规则。
五、校验请求参数
六、发送登录的接口请求API
uni.request(参数名):用于发送网络请求。
注意:method有效值必须大写,每个平台支持的method有效值不同。
七、数据缓存
用 if 条件判断语句判断当前用户是否登录成功,如果登录成功则跳转到首页(pages/index/index);
else :如果失败则返回登录失败信息
八、注册页面
注册页面和登录页面差不多,只需要将登录页面的API改为注册页面的API就可以了。
小结:
uni-app是一个使用vue.js开发所有前端应用的框架,如果之前没有代码基础,一开始只需要掌握 Vue.js 语法即可,其他相关的知识点我们可以边做项目边补充。
与我们学习一门新的编程语言的思路一样,如果想要快速上手的话,我们不需要在刚开始学习的时候,就要弄清楚开发所需要的全部语法、组件等。这样会耗费掉我们大量的时间,并且没有实例的支撑,学习起来会很抽象,导致后面很难坚持下去。
如果你有一些代码基础了,在我们刚开始学习 uni-app 时,建议先创建一个 uni-app 项目,先学习如何将项目运行起来,跟着课程一步步的填充代码,并看到实时展现出来的效果,这样会让我们学习和开发的过程更有趣更高效。
更多推荐
所有评论(0)