一、什么是API

API(Application Programming Interface,应用程序接口),就是软件系统不同组成部分衔接的约定。其主要目的是让应用程序开发人员得以调用一组例程功能,而无须考虑其底层的源代码为何、或理解其内部工作机制的细节。API本身是抽象的,它仅定义了一个接口,而不涉及应用程序在实际实现过程中的具体操作。

二、登录注册页面展示

三、代码功能实现

 

当前页面内容涉及到uni-forms表单组件的使用, 通常用来做表单校验和提交。每一个 uni-forms-item 是它的一个表单域组件,用来承载表单具体内容,uni-forms-item 中可以嵌套 uni-easyinputuni-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 项目,先学习如何将项目运行起来,跟着课程一步步的填充代码,并看到实时展现出来的效果,这样会让我们学习和开发的过程更有趣更高效。

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐