00:00
上一节我们创建了这个会员登记的数据源,本节我们就进入到页面开发,首先的话,我们进入到我们自己的这个小程序里头。一般的话进入小程序,它是要点这个编辑应用。然后就打开了这个编辑器。呃,因为我们是要做这个会员登记的这个业务,所以我们先的话点击这个页面管理,然后切换选中这个登记页面。这页面的话,我们一般是从首页引导进来之后,应该是有一个导航条,它可以点这个图标的话,向上返回到首页,所以我切换到这个组件。然后我找到一个导航的一个组件,它现在就是上面就导航来了。啊,我们一般要修改这个组件的话,就是先切到这个数据,数据套的话,我们把这个导航标题改成会员登记。
01:01
然后把这个显示返回图标这个按钮打开。啊,这样的话,它这个图标有了,但是图标有之后点上去不会有任何作用,所以我们需要给它定增加一个事件。嗯,就是。点击这个平台方法,然后我这个要选择back返回。来点击一个确定,这样的话,这个返回就有了效果了。呃,顶部上去,导航条做完之后,我们就是要考虑到我们的表单怎么做。表单要想做的话,首先是需要呃,在这个里头增加一个表单容器。就是我们所有的这个输入项的话,都要放在表达容器里头,然后我们选择这个它这个就是操作的话都是在插槽里放组件,具体的话先选这个插槽。就能查到之后,呃,我这个在会员登记数据源里头,不就增加了两两个字段嘛,一个是姓名,一个是电话。
02:03
所以我们在这个呃,表单里头,表单的这个页签里找到这个。姓名的话,我们选择表单输入就可以。然后我在数据里头改一下。这个字段的表单字段名称,这个是什么意思,这个要和数据库的那个字段进行绑定,我就是我和那个数据库那个标识字段标识,我起的是英文名字吗。姓名。我是内。然后表单这段标题我就修改成性。嗯,这样就可以了,它是一个呃,左右结构就OK。然后我们再增加一个电话号码,电话号码的话,它有一个现成的组件叫表单手机号码,这样的话你就不用再去呃写验证逻辑,它其实这个组件自带校验的手机号。然后我们点击一下它增加一个手机。
03:00
还是需要这个修改表单字段名称,我们修改成那个数据库里头。呃,手机叫phone。这样就OK了。呃,有了这个输入项之后,其实还需要的有一个操作的按钮,我们选择这个通用这个页签,然后点击按钮。我们同里的话修改一下,他就提交。然后这一块需要说的就是它这个需要改成体积。提交的按钮才能结合上,呃,这个表单容器,把这个数据提交到数据库里头。初学者的话就是一般这块会比较难理解,那我这个提交完之后怎么进入数据库呢?他可能想的是在这里的定义,其实不是的。我们不是在按钮上定义事件,是要在表单容器上定义事件,然后它表单容器有一个提交。然后我们选择第二个,第三个动作类型叫数据源。
04:04
就是我刚才创建那个会员信息这个数据方法的话,不是刚才咱们说平台会给你生成默认的增产改查的方法,我这里头。就是呃要创建单条记录,然后传参数的话,因为我这个表单呃会获取这些具体的字段嘛,所以要传入的就是event detail。这样的话也会就会把你呃在表单上输入的数据传递给这个创建方法,然后他就能存到数据库里头。点击确定。啊,这样的话,这个就完事了,完事之后其实我们还是为了友好的操作的话,我在这个数据源成功的时候。我想的话给他一个。提示信息。选择一个收。然后标题的话就是写那个提交成功。
05:06
然后点确定。这样的其实就OK了,我们这个逻辑的话就是点击这个登记,然后呃,打开或者提交到数据库里头,我们现在先把页面保存一下。保存好了之后,其实就是我们日常的,呃,在开发的过程,它叫那个啥debug,就是相当于是一个测试。调试的一个意思,呃,在像那种在线编辑的这种工具的话,一般就是点成预览。还是实时预览一下。它要变成实实际的一个链接。稍等片刻他就啊,他现在这个已经编译好了,编译好之后我们测试一下我们的功能,点击这个会员登记,然后输入姓名。
06:04
手机号码,他要输入一个。正确格式的手机号码。哎,一点提交。他这个就是请求网络,然后之后提交成功了。调成功了之后,我们需要就是看一看,哎,我这个数据真正提交到数据库里头没有。嗯,其实就是可以在哪看点先返回到这个。应用这个界面,控制台这个界面,然后我们点击这个数据源管理。它其实就是我们刚才说会员这个管理数据这块,它就是带的一个内容管理后台,你就直接可以看到你的数据了。点这个预览。Come in。呃,我这个就是刚才提交过来的数据。啊,但但现在这个,呃,数据没有,数据没有的话。
07:04
没有,我看是什么意思啊。这块没有数据的话就比较麻烦啊,我们现在就是需要做一个动作。进行调试,怎么做呢?还是回到这个应用编辑里头。应该可能遇到情况,就是刚才那个,嗯。这块传入的参数的有问题。Detail。那我们那个先看看我原来的那个。做好的,可能我那个单词是不对。
08:07
嗯,应该是对的。我把这个复制一下。我们先复制过来看。试一试行不行?嗯,这种线上的工具就是调试起来这块烧钱,就是现在不是特别便利,因为他没办法锻炼跟踪。EVENT。嗯,咱们再再测试一下。不行不行。
09:10
再输一个手机号。然后点击提交。它提示提交成功了。还有一个我们需要操作的就是可能确实有问题,问题就在这个,谷歌浏览器可以打开这个。开发者工具按F12。啊,这个你看对。打开了之后,它其实是,嗯,有各种各样的这个选项吧,我们现在打开这个network。然后我们再点一下这个提交。嗯,他这个就是有一,其实它是调了后台的一个方法,我们点进去。
10:02
然后看他这个。Data里头有没有传过去?Response code等于零,确实是。扣的应该是等于一才对呢。那我们看hier里头。Post。他这个看他这个方法肯定是掉成功了。要成功,我们现在就需要找一下为什么。数据没有进去。
11:19
出去确实是没进来。你接下来还是那个传参的问题。我们后续再找一找这个参数该如何设置,这块的话就是呃,一个熟练度的问题,因为我现在是新的组件库,我在找找这个新的组件库有什么问题。
我来说两句