APP和小程序实战 | 数据云和后端交互本地存储原创

好，咱们就正式开始了啊。嗯，正式开始之前呢，就是我们先把昨天的课补一下，因为昨天的那个声音那个有点问题，而且组件开发呢，就是第三块里面的组件开发是咱们的系列教程里的一个重点，而而且呢，本次那个组建大赛呢，可能会需要到这里面的一些知识。好，昨天我们在那个给大家讲到了，在外部浏览器里面调试这个页面，我们知道如何去找到它的页面，实际上呢，这个页面。的预览地址，也就是在咱们的那个资源管理器里面。通过在资源管理器里面，在你的项目目录里面去找到这么一个文件，把那个。这就是咱们那个项目的所在目录，可以看到这下面有一个B这样的文件夹，然后这里面都是就是咱们的编译后的一些目录，举个例子，像这个DEMO3，因为这个项目是啊，这个项目是我们。

嗯，新建的一个项目，然后我们上次演示的时候，其实是在那个act这个项目里面做的，我们往上走一走啊。在这里。In the COP。然后这个文件夹里面的就是咱们上次演示的那个代码三的文件，然后这有一个preview pree呢就是那个咱们的在web里面的一个载体，通过它呢，能够访问到，能够给他一个容器，相当于是挂载的一个初始的页面的一个，呃，入口文件在这个初始在这个页面上面呢，可以添加一个参数就是。配置等于当前目录下的一个。3.gs。这样的话就是咱们定位到我们这个。

预览的文件上面，而且是在这个项目里面的一个预览文件，我们就可以通过浏览器的方式来预览这个文件，以后的话我们可能会嗯给开发工具的小伙伴们建议一下，就是说这个地方如如果如果去嗯给他添加一个按钮啊，或者一些快捷的打开方式，能够直接进入那个web页面，不需要再手动输入了。进入这个页面之后呢，我们还是继续看到咱们上次三个标签，呃，在页面中展示的这三个部分。在源码里面我们来看一下。其实就是这么一个简单的一个结构，这里第三课呢，就是我们嗯，在负极页面里面的一个文本标签，然后在那个下面呢，还有一个simple GS，这是咱们一个自定义的一个组件，对吧？自定义的组件就是在这里去定义这样一个组件内容。当然这个组件里面的一些还有一些文本，这个子节点呢，是没有显示出来的，是因为我们在子节点里面直接给他了一个静态的一个模板，跟那个上面的子节点里面的东西还没有关系，所以我们后面进阶的处理，拿到一些属性之后呢，能够给他做一些咱们需要的处理，然后做一些展示。

我们上次讲到一个非常重要的概念，就是这样一个节点，它其实是一个在转化出来之后呢，通过run的函数。通过run的函数呢，它是会得到一个。嗯，V的一个节点的，那么V的表现形式呢，就是在这里一会我打印一下。还是拿到这一个值。嗯。我定义一个vload。然后把这个V6的先返回回去，在返回之前呢，我们打印一下。这里给它加一个标识吧，因为可能咱们打印的可能比较多。

这个是随便的，他只是拼写的检查，所以咱们。处理一下。这里没有什么变化，因为咱们其实是要研究在他在浏览器里面如何显示这个节点的，可以看到我把这个还是放大一点。把页面放小一点。选一个小点的手机吧。然后这个地方就是我们打印的v load后面它有一个这样一个节点信息，我们昨天也提到了，他的那个数据结构也非常简单，就四个属性，一个是load name，就是咱们那个节点的名称，一个是。K这个K呢，目前来说是没有还没有一个内容填充啊，因为这个后面可能会做一些对算法里面的一些优化，咱们如果传入K的话，其实是可以嗯高效的监测哪些那个内容节点是没有变化的，或者说做地图算法优化的时候是会用到这个K，咱们后续可能会支持这个一个特性。

另外一个就是一个attribute attribute就是属性，我们昨天在讲到那个GSX的时候，所有的attribute呢都会放在这个属性上面，那么另外一个就是child。就是children，因为它是一个辅助型，什么呢？就是一个数组，它里面可能会包含很多的一个。呃，很多的那个属性，很多的那个子子节点，这是属于child，那么咱们回到这个漏里面来呢，就是。这里有一个外面的一个容器，里面有一个子节点，正好对应了咱们这样一个结构，对吧。我们还给大家演示到就是attributes和那个这里的话，这里加的东西都是attributes啊。

比如说我们在这里一般会写上一一些类，一些样式，就是比如说class这样的。还有我们可能加上ID等于什么，等于一个DEMO。他最后生成的节点呢，就是我们应该是比较理想一点的，就是嗯，Class和ID都会挂在这上面，然后嗯差还是没有变化。这是一个组件的一个V的节点，然后我们如何拿到负节点里面的那些属性呢？就是软的函数里面有个prop那个参数啊，我们在这里再进行打印一次，打印一个purpose。来看一下这个purpose。

现在目前propose呢是一个background color是red。这样一个呃对象，然后里面还有一些求准这样的属性。然后能够看到下面又是一个，呃，下面的有一些文本节点，那咱们对与之对应的呢，就是。那个里面有一个style标签，Style属性呢，是来自于父节点给他的，给他给到他的一些属性。嗯，咱们回到这里面来看，这里就给它的一个属性，说白了就是我们在这里打印一下this的时候，你看这里有一个this啊。嗯，我们在看到这个类似，就是这里的一个类似。嗯。然后他有一个有一个子节点，就是咱们看到的这个simple GS的一个子节点的一个位置，在这个里面呢，我们还可以打印一个this render。

当然这个时候render其实是没有的，因为它那个re，它这个data函数，我们昨天讲到的那个生命周期是非常非常早的，他是在那个，你看这里它是在那个。构造函数里面相当于这是一个ESES5之前的那种类的写法，它是在那个构造函数之前就执行了，那么所以这个类似的时机非常早，那么往后再放一放。比如说我们把这个拿到那个，有一个生命周期，叫做instead。我们给他加一个前缀，然后我们是在这个style里面去这个生命周期里面去做一个打印，因为这个时候啊，他其实生命周期已经走到比较偏后的位置了，他一些初始化和一些实例化的东西已经处理好了，那我们再看一下。

啊，别不要忘记在这里编译一下。在这里就能看到一个render render函数，Render的一个日志啊，这个就是咱们这里打印的，要记住这个render是咱们这个副组件副页面的DEMO3这一个，那么通过这里的一个。Re的一个日志看到呢，这里有一个attribute，它的class是一个配置，对吧，对应出来是没问题的，你看它其实是从这一块把它全部抠出来，对吧？把template里面的所有内容抠出来，作为一个嗯，渲染节点，所以这个template你也可以对应到，就是如果说咱们使用那个单语言方式去定义的话，那咱们run的函数就是这样的。嗯，咱们看到这个re里面有一个child有两个节点，一个呢就是text text就是第三课，就是上面这一个这个节点对吧，这个呢，就是第二个，因为他们有两个子节点嘛，配置上面有两个子节点，所以他的那个他的那个。

Children呢是长度为二，然后我们看第二个，重点看第二个。这里面的attribute呢，就是这样一个style，现在是不是有对应起来了，咱们上面不是有一个prop嘛，其实就是这里的attribute，那咱们如果说。理解好了之后，那个GSX那个规则和咱们这个渲染的一个模式之后呢，对这个东西还是非常很好理解的，好继续讲，嗯，我们现在给大家。对，这个是需要消化的，因为这个东西是有点抽象的，就是相比于之前来说的话是比较抽象的，那我们结合这个A这个项目里面的一些例子，给大家讲解一下咱们是如何利用这个prop呀，或者说复制之间的一些属性，然后进行一个解析，或者说形成自己的一个操作。

呃，咱们同学在群里面好像问到一个问题，就是如何去实现一个数的组件，或者说如何去做一些像类似于view里面的引用组件，那其实如果说咱们掌握了这个关系之后呢？嗯。还有就是群里面如何去，他会问到怎么去看那个this。所以我们在这里就可以打印一下这个this。就是如何看一些里面的一些隐藏属性，或者说关联的一些属性。我们在这个类里面呢，就能看到它的一些，它这个整个对象的一些东西，这个是你在那个咱们这个日志里面是不是很容易看到的，因为打印出来的话，你可能需要字符串格式化，然后这里面可以拿到你的random函数，甚至说我还可以把它保存为变量，你在调试的时候啊。嗯，保存为一个局部变量TEMP1。

那么代码其实也是在这里，甚至说我们可以再执行一下，因为它是一个函数吗。那么就也能拿到具体的最后的一个渲染一个效果，看一下这里面的一些例子。就是我觉得值得讲一讲的一些例子，我们先看到文档里面。嗯，应该是在。Get up上面。嗯，希望同学说你的api.upset这个东西是，嗯，目前来说咱们还不太支持，就是如何获取的元素的外形轮廓，宽高什么的，咱们后面可能会去支持这个，因为它是跟盗墓操作不是一样的，所以他没有这个概念。这个的确是一个比较刚需的东西。咱们就拿这个日历组件来说吧，在这个里面呢，就是咱们在定义了这么一个组件，然后里面有一些。

重点看这个install里面安装的时候呢，我们去用这样手写的方式去给他写了一个函数，相当于是在这块的那个，嗯。刚才我们保存了一下这个render函数嘛，因为他每一个对象都有一个render，其实你做那个temp的时候，其实就是目的为了为了获得这么一个render函数，那么我们可以是不是就可以在它安装的时候呢？Cel这个生命周期里面，把它去主动的去给它赋值作为一个函数，然后我们就相当于就可以去不需要写template，然后就能拿到这样一个。恩。对象，然后我们在下面可以，比如说它这个函数里面是有一个参数的，我们可以通过tap或者通过这个。嗯，一些mean data的配置，然后我们做一些特殊逻辑，嗯，在下面呢，我们最后去通过这个H函数来返回具体的UI，因为这个是组件嘛，我们现在今天说的是组件，如果你的那个。

嗯，组件并不是这种抽象组件，或者高高级组件的话，是业务组件，那么其实你完全可以，呃，使用普通的HTML方式，咱们就写一个小的小的部件，或者说小的一个业务场景的那样的一个组件。嗯，咱们就回回到像这个订点餐里面的一些业务组件，因为我们昨天讲到的那个组件是分为有两种，有两种呢，其实是一种是像这种抽象组件，一种一种是那种业务组件。那么这里面就相当于比如说像good list对吧，Good list item，这个就是非常常见的一个组件，这里面就是呃。这里定义了一个商品的一个类型，然后这里面有一些商品的标题商品，然后通过商品的传入进来的一些数数组列表，然后给他做一个具体的商品列表循环，然后在里面可以做一些像点击跳转啊，或者是说一些价格啊，这些特殊的处理显示，那下面就是组建的一些样式。

因为咱们这个目前那个样式的，呃，SCO的好像目前还是嗯，作用率还隔离并不是很有效，所以就是建议大家使用那个b emm的方式去给CSS组件去命名，这样的话就是不会导致你的其他的，如果有相同类型的那个前缀，然后造成那个。变量污染。下面的话就是一些方方法，就是还是非常简单的，这个的话，如果说熟悉的同学直接可以把它。改一个后缀就可以用了，对吧。如果说在页面中引用的时候呢，直接导入进去就可以了。只是说在使用的时候，你可能要传入一些数据参数，然后你看像这里就用了一个估值类似item，那么我们给他传入一个类似动态的绑定一个数据，然后在那个组件里面就能拿到。

嗯，关于组件通信昨天也讲到了，大致就是那么一些，嗯，那么几个方式，嗯，然后至于组件之间通信的话，那么可以就是去看一下那个文档里面的一些讲解。呃，另外我还要补充一点，就是那个抽象组件里面有一些关，关系到样式集成和事件集成的一个一个问题，因为有时候你写的时候，比如说你在副组件上面写的时候，嗯，因为这是个出现，这这是一个组件嘛，然后可能你会这里给他加一些额外的style。或者加一些额外的像class，像下面已经写过class了，然后如何去支持他们？如果是抽象组卷的话，可能就这这些东西没有处理，咱们是需要进一步处理的，就类似于这个里面的，像这里我看一下，因为这个地方是。

给大家新建一个吧，我这里做了一个模板，如果说我要建立这么一个组件的话，可能比如说要做一个DIY的组件，那么它的名字叫做DIY。如果说你要使用这种的话，我们是通过prop，然后给它用字符串的形式把它关联起来的，对吧，如果说没传的话，那就是空空字符，如果是有的话，那么就会拿到，并且这里还缺了一点东西，就是。一个因为我们知道上次说过那个，嗯，在这里呀。找一下。如果说在这里有一些事件的绑定，我们在那里看到里面看到了这个里面是，呃，这个prop里面，它都是放在那个。这个里面都是放在attribute里面的。所以说有一些on click呀，或者一些on监听事件，那么可能会拿不到，所以会导致你的组件并无法响应负极的一些事件，那么我们如何做呢？就是实际上在这个这里面我们还需要做一部。

使用那个ES6的展开符，把propose全部展开。然后这样的话就是可以充分的继承负极的一些东西，然后下面呢，就是咱们一些新的内容去覆盖到，覆盖掉一些那个原来的purpose里面的一些属性，这样的话就是会完美的就是继承上面的一些样式啊，或者是事件啊之类的。那有了这些基础之后呢，我们就可以创造出我们所需要的一些组件了。并且我们要对一些组件上做一些特殊标记，我昨天也讲到了，就是通过便利或者自己去处理啊，能够拿到那个，呃。对象接算对象的一些属性，然后给他手动给他设置上，或者有些还需要移除的话，那么你再处理一下。我们在这个act组件里面有一些针对这个对象的时候做了一些处理。

你看像这个slot sports的时候，因为咱们现在目前不支持插槽的话，其实我们可以自己去实现一个slot，对吧，我们就是通过一个把咱们的V的传进来，然后我们就可以去找那个。定义的，如果说那个你的。Load是一个test，或者说你的load里面是有一个attribute的时候，嗯，我们就可以去解析这个lo里面的一些作用域，然后呢，给他绑定到那个HP上面去，下面的话就是演示的一个如果你的如果在负负极页面的话，如果他load节点是一个。嗯，是一个temp的话，并且它的attribu有一个属性怎么体现出来的呢？就是我们可能在我给你找一个simple里面的有一个。像森赛啊。我们搜索一下slot_slot。

如果说我在遍历这个节点的时候，里面那个tag name或者load name是一个template，并且它有这么一个属性的话，我是不是就可以知道它，它是想做一个插槽的作用了，对吧？那么我们就可以对它那个插槽。就是做一个分割，因为这个地方是做了一个分割兼容的，如果说你不分割的话，嗯也是，嗯，直接就是那个title进去了，因为我们在title里面还设计了这样一个语法，就title可能有一个嗯，有一有一个变量名这样的东西，然后给他实现那个scpe那样那样一个作用域的一个实现，所以我们就能拿到它的所有的子节点，子节点我们需要替换在模板里面的，像这个对应的这个cell里面。我们再找一个slaughter。我们下次如果说在这个子节点里面去找到这样一个lo的话，那么就可以把这个title里面的所有的子节点全部替换为我们模板里面的这样一个内容，是不是就实现了一个插槽的功能了，对吧？

你看我们这里就是直接把这个。Lo面对象里面定义的那个漏直接放给他，交给他，然后呢就可以把那个内容填充进来了，这个是针对漏的一些操作，就是一个节点操作，我们是如果有这个操作的方式，那个入口的话，就可以给他进行一些处理。当然这些东西就是我提到的这些东西是比较嗯深一点的东西啊，如果说你做的只是那个。如果你只是做那个业务模板，那么咱们只看前面那种业务模板就可以了，其实这些东西都是，嗯，还是很好理解的，嗯，我关于大赛的时候，我再提一点，因为大赛现在咱们有有一些级别。就是你的。

看一下大三啊。这能不能打开。我这好像打开咱们官网有点。连麦。每次。像这个大赛里面，你是可以提交一些组件的，或者说你是可以提交一些业务组件，也可以提交一些那个功能性组件，那么你还可能还可能会提交一些那个是那个整个完整的项目，完整的项目的话，你就是可以参与一些案例的，那么组建的话就可参与一些小组件的，我给大家举一些例子，比如说我们经常用到的呃打车对吧，我们在论坛里面，以前一些同学也实现过类似于滴滴打车的那些案例。你可能打开一个页面，上面可能有一些打车输入地址，下面有一些地图，然后根据地图调整位置啊，这样的一个场景化的一个东西，或者说你就微信选择发送位置，这样一个场景化的页面，那么这就属于一个功能性组件或者说业务组件。

如果说嗯，还有呢，就是像一些小的场景，比如说我看到有的同学好像实现了一个剪切板的三端的一个兼容，这也是非常好的一个点，然后我们通过自己的一个嗯，给大家提供的能力的包，然后去嗯实现咱们所需要的功能。另外呢，就是也可以做一些像像act这样的组件。其实咱们这个组件设计的时候，我就是。嗯，就是参考的这个咱们万这个组件，所以你看到有一些。实现还是非常相似的，我们在这里看一下徽标，比如说举个例子，就徽标啊。Bad，我在做这个组件的时候呢，其实就是其实我做法是什么样子的，就是把它这个直接拷过来，因为他的这个东西就是可以算作一个需求文档，或者说一个产品设计了，嗯，只是说我们可能有自己的一个前缀，所以我们在ACP里面实现的时候，你看到我的例子其实都是举的一样的。

嗯，只不过就前缀可能它那个是万，咱们这个是A，或者说我们后期好像需要改成act，或者你自己的一个DIY前缀，这样给自己的那个组件增加一个标识。所以这里面的例子都是一模一样的，完了之后它的用法，或者说文档，我还是都能够都是说尽量的去满足这样一个用法。因为。我们相当于这是一个，因为万是一个非常优秀的组件嘛，那么我们就参考这样的组件去给他实现咱们的am版本对吧。他现在都是，其实都是比较。对等的，然后并且包括下面的一些prop属性，嗯，或者说有些需要的一些给大家往出暴露一些方法啊之类的，都是类似的。

另外除了万呢，大家在开发过程中其实都有很多的经验了，嗯，都有可能自己收集了一些很多的一些第三方组件库，像那些element UI啊，对吧，I啊，泰罗啊这些滴滴的，还有一些很多的。一些组件像类似于这个VUI的，对吧，这个就有点弯道超车了，就是因为它本身这些UI就很跟微微信很类似，而且小程序里面也有一些实现，你可以直接去设计的时候呢，可能咱们有些。咱们的大部分的开发可能对那个样式设计可能存在一些欠缺，咱们就可以直接看他的CSS，然后把它拿过来，就是可以做一些移植这样的工作。我觉得还是非常。嗯，有有挑战性的一个事情，因为咱们的那个A的渲染机制是并不和那个外部是完全相似相似的，因为他不支持继承或者说兄弟组建，或者是说联合选项这样的一个属性选择，那么咱们可能要做一些特殊的适配，并且呢，在安卓和iOS端可能还要做一些，嗯，优先级的处理啊之类的，这这也是非常有有意义的，有有趣的事情啊，这是非常有挑战性的事情，当然他是能够做的，做出来之后呢，咱们可以开源出来，那么大家都可以来使用，那这个对咱们的那个能力提升啊，或者说知名度提升都是非常有帮助的，如果让你设计一个组件，比如说他可能就会拿很简单的一个button来说啊。

你如何设计一个button按钮，那么这个时候呢，你就会它就会考察你的一个嗯，统筹能力了，因为这个button其实看起来很简单，它是一个非常基础的按钮，但是它包含了一个色彩体系，然后样式的体系，对吧，还有一些点击的嗯，那个效果，或者说事件的一些处理，并且还有一些禁用一些机制，对吧，这个都是非常，嗯。

非常丰富的一个内容啊，就是说如果你要做到完美，或者做到做到嗯强大，那么其实你要处理的事情还是很多的。是不是这个道理，另外呢，你们还可以就是说使用一些测试工具，然后增强你的项目的稳定性，不要说你这次做完之后，因为我有一个新的特性，或者说新的属性加入的话，那么他就会挂掉了，以前的就会有问题，这这也是一个呃开发技巧。像act的一些提交的话，我们可以在这里去commit里面去学习一些它那个升级的一些。东西啊，这个是非常好的一个方式，因为这里可以很明显的看出我改动了哪些，对吧，比如说我有一个同学，他需要有一个自定义标题的颜色的这样一个需求，那么我就给他。在文档里面加入了一个title color这样一个配置，那我们在那个代码里面呢，就是给他把这一行去掉了，那么我们加了一个什么呢？其实对比上面来说，就是加了一个title color的这样一个属性，如果不传的话，那么就是黑色的，默认黑色的对吧，这个所以我们在simple里面写的时候呢，我们就可以很愉快的就是把咱们的t color的这样一个属性加上去，我们一看预览啊，果然生效了。

那下面呢，我们就是再去做这么一些例子的时候，或者做这么一些升级的时候，就可以去参考这上面的commit，因为有一些。有一些例子和一些增加一些特性啊，更新了一些写法，我们都可以去在里面很好的对比，红色的都是删掉的，都是修改掉的，然后绿色的是新增的。另外呢，就是咱们的那个CSS样式就是。嗯，因为我们知道他不支持继承嘛，他写的比较目前有一个流行的说法叫原子式的，然后这里有一个CSS框架，推荐大家看一下T万的CSS。

我们不去看他具体怎么使用，只是看一下他的一个写法，我们这里看一下。你看这里它是定义了一些，呃，颜色直接写在这里面的，或者说一些嗯，渐变啊或者之类的。然后宽度啊什么的，他都是这么写的，是非常原原子化的东西，我觉得这个还是可以使用一下或者借鉴一下的，因为你看他现在都是把那个颜色抽象出来，然后相当于做了一个主题这样一个东西，对吧，然后这个地方，嗯，像他这些宽度啊，高度啊什么的，他都是这样一个抽象，其实跟咱们的avm很类似，不需要去做一些咱们混合的。嗯，样式的一些组合什么的没有，他只是原子式的，他一个类就干了一件事情。然后如果说你有多个样式，其实就被组合在一块，说白了其实还是有点像CSS直接写style的一个方式，但是他更加的一个有整体化的东西在里头。

那另外就是咱们昨天还留遗了，遗留了一点就是跨端适配和条件编译这个东西，跨端适配怎么说呢？和条件编译这个我们在前面的课程里面也讲到了，有一个，嗯，如何在业务里面去做那个小程序和那个微信。那个做那APP里面的一个判断就是这样的，我们的我们有一个FMMP对吧。这里是在业务逻辑里面的一个出，嗯，就是条件适配，然后在这里呢，模板里面，我们就可以把它作为一个变量，也可以用V去做，其实我们更多的时候有些业务形态是不一样的，我而且根据性能或者是说根据业务场景的话是不一样的，我们还是最好是能够灵活起来，把它做的更加的呃细致一点，对吧，我们时间也过去了40分钟了，我们要赶紧进入咱们下一节的课程，就是今天的本来要讲的课程，嗯，希望大家能够组建这方面的话，如果有什么问题。

嗯，都可以在群里面继续的沟通，因为这个它的内容涉及的还是非常多的，嗯，而且最好大家能够参考这个act，这个是非常的有代表性，或者说比较典型的，大部分的例子都能。都已经遇到了，或者所以说你们在这里面去看的时候，尤其是你们要开发那种抽象组件，或者说要高级组件的时候，那么你就可以借鉴这个例子。嗯，并且呢，你可能还会贡献一些你的新奇的一些呃写法，或者说比较有那个比较优秀的那个源代码库出来，然后大家都可以去共享你的那个代码。

嗯，所以还是希望大家能够学习之后呢，参与到咱们这个大赛里面啊，我看一下大家的问题，嗯，元素宽告我刚才说过了，还有一个就是表格逐渐讲一下，表格的话目前来说没有实现，那这这不正好是你的机会吗？对吧，要不要实现一个表格，给咱们那个act贡献一个a table出来。啊，你可以设计一个表格，然后支持一些边框啊，或者逐行变色啊，这些东西你是不是都能做出来了，因为嗯，我们可以操作那个那个节点了吗。好，我们进入第四节课吧，嗯，因为这个现在已经过去了40分钟了，嗯，把昨天的补的那个差的内容补了一下。其实这个组件的话，我要细讲，可能还会讲很多啊，我觉得这个完全有可能能够开一个系列课程组建的系列课程了，对吧。

因为咱们这个组件其实是非常灵活的，你可以看到虽然说他长得像will，但是它实际上的内内核是什么？其实它是react这种组件式的。那么进入第四，第四部分的数据云的和后端交互。咱们的API3.0推出之后呢，随机推出的有一个云数据，云3.0也是同同步推出的，这里有个视频教程。这个视频教程还是非常详细的，我因因为我其实怎么说呢，我在以前接触项目的时候，嗯，都是使用的，可能那个项目它的架构本身就是决定的，是我可能没有使用数据云这样的一些服务，或者说像小程序云开发这样的东西没有去使用，因为有专业的后端同学跟我们配合，然后去跟他对接接口，那么数据云呢，其实是一个新的那个so的这样概念，就是没有服务器，那么只需要去把我们代码编写好，不需要去考虑那些，呃，数据集群，服务器集群啊，或者说缓存啊，以及高并发的问题。

或者说运维安全之类的东西，也不考虑这个部署或者说环境的版本问题，这些都是，嗯，在咱们开发的一个之外的事情，就可能更多的是运维同学的一个，嗯介入，但是咱们现在很多的开发者都是属于全站类型的嘛，就是你可能会自己选选一些专业的那个后端接口或者数据库设计之类的，但是你也可以就是直接，如果你的业务类型或者说。业务场景比较小的话，那么你就可以是使用像数据云这种的服务。那我这个就是之前用的比较少，那么为了给大家讲课呢，我也是自己体验了一下，所以今天我就是可能不是太深入的给大家讲，那么如果说详细的那个讲解，可以看这个。

数据的这个视频介绍，视频教程可能还是非常详细的，另外呢，在咱们那个腾讯课程上面也是有一个课程呢，我记得打开过。在这个多端开发的这个课程下面，我还是从那个主页上面打开，看怎么进去找到它。在这个课程下面有一个多端云开发的这样一个课程，这就是咱们那天直播课，就是发布会的时候的一个直播，嗯，在这个回放里面。前半节呢，是讲咱们的一个am3.0的一个特性，后半节呢，因为他两个小时合在两节课合在一块了，那后半节呢，就是一个咱们云端的一个介绍。

我们来演示或者尝试一下吧。因为我这用的不是太多啊。但是能保证大家能用起来，因为我也是去用了一下，感觉还是挺不错的。Avm的例子，下载路径发一下。Am，你你先记住这个，你先记住API cloud com记住他干嘛呢？就是这是咱们那个get的那个用户名。对吧？A API cloud com，然后它下面有一些组件，有一些那个项目，然后你可能找到下面的一个，这就是那个项目主页。把那个。对，然后你要是你要是我建议你就是通过那个get检出的方式，这样的话我们可能会有一些更新，然后你get铺一下拉一下就行了，然后可能回去最新的，那么这个地方就是接download的一下。

下载一个，下载一个这个。抱下来。咱们使用的时候，你注意一下这个地方有使用方法。那么如果说你的是网速比较慢的话，那你可以考虑使用国内的这个国内的国内的那个地址的话，你要记住是API cloud没有到com么。是这个。然后我们回到这个数据云，因为有同学已经开始期待这个数据云了。我选一个，选一个什么选一个。项目吧，选一个。因为我们要给他演示如何开启从零到一的这样一个过程，你看这个项目就是没有开启数据云的，所以我们点击一下，我们点击这里啊，注意是云开发这里，然后有个云设置，你随便点，不管哪一个，如果你没开启的话，肯定都是让你开启的那个毋庸置疑啊，你点一下开启云数据3.0。

他开完之后呢，就会有一个设置页面。设置页面这里有一些接口验证，或者说有一些token设置这些东西，然后有两个环境，有正式的测试的，还有文件存储。这也都是一些。呃，基本设置，然后还可以设置一些域名，我们开启一个测试环境，好，我们这里开启了，然后这是一些基本设置，比如说接口验证啊，Token设置啊，以及session认证什么的。嗯，我们在这里就开始进入那个模型开发了，它其实是什么原理呢？就是你在后端建立一个数据模型，然后对他进行绑定一些方法，然后我们就可以，嗯，通过接口来访问数据，然后做一些业务逻辑。嗯，我看一下这个地方。

怎么样，我们先作为这个做这个事例演示吧，我们就不不自己创建了，他这这有一个DEMO，就是一个官方的一个实例教程，我们直接导入，或者说像微信小程序这样的一个生鲜配送哦，这有生鲜配送啊，生鲜配送的话就是那个咱们那个DEMO里面的那个。嗯，就是生鲜电商那个模板里面的一个后端的接口，所以如果说你们自己做了这么一个模板的话，呃，那个用那个模板创建的项目的话，可以把这个导入进来，然后进行一个测试或者是说学习，我们现在导了一个DEMO里面它有两个模型，一个是department，还有一个employ，这个部门和雇员这两个模型啊，他这个模型是什么呢？就是如果说你熟悉后端开发的话，那么你就非常清楚，他其实就是一个数据表，对吧，因为表的话对应的就是一个实体，就是一个，嗯。

它就是一个相当于是一个对象，就是说部门它是一个对象，那么部门下面可能有雇员，他是这样一个关系，那每一条那个表里面有一些字段，它字段你叫做列，对吧，你每加一个字段，它就往后多一列是不是？那么你下面的每条，每条记录上都是一个行，这个是不是，如果没有数据库开发经验的同那个同学们呢？就是你把它想象成一个Excel就行了，对吧。然后你可以对他进行一些关联model，然后或者说做一些增加或者删除的一些操作。然后有了模型之后呢，我们比如说这个部门吧，我们就针对这个部门来说吧，因为这个模型，比如说你的应用里面是要做一个部门管理，管理的部门里面的部门和部门下面的成员，你看到有一些。添加行的话，就是在这里添加一个数据，然后这些部门的一些呃详细数据，当然我们如果说这里添加的话，只是说这是一个管理工具，我们可能会有专业的一个控制面板给那些咱们的运营人员，或者是说我们增加数据，说可能通过接口去APP上面操作一些接口去给他保存数据。

然后我们进入下一步，就是比较重点的开发云函数这一块。云函数里面其实是包含。嗯，包含这几种函数的，第一个是global函数，它是一个全局函数，全局的一个位置，你在这里加入一些global的一些对象，嗯，比如说叫做。啊，编辑一下，比如这里叫做我们来给他写一个密钥对吧，比如说我们密钥可能就是123，那么写这样一个对象，你可能在其他函数里面都会使用这个大G，然后点出这个K，然后就能使用了。然后引函数呢，就是一个初始化函数，这里有一个文档教程，如果你不是太清晰的话，他这里都是非常呃非常详细的这个，因为这一个文档教程非常长的，也是非常完整的，我是就是在这个上面去学习这个的，这个云云数据的云服务的。

函数里面，你看我这里面有讲的非常详细，就是初始化函数他只会做一次，比如说你这个服务器重启之后呢，可能做一些定时任务，对吧？嗯，比如说初始化变量，还有一些可能需要清除缓存，重新创建这个，嗯，这个文件啊之类的，因为你比如说你做一个，嗯，像那个。抓包或者是说爬虫子之类的这样应用，那么你是不是要把以前的那些数据全部清除掉，做一些初始化的动作，这边有个全局对象，就是刚才提到这个大G，那这里面可能可能会保存一些像你的要用到的一些密钥啊，对吧，还有一些参数什么的，你的发短信的一些密钥，另外一个这里有一个mid well是中间键函数，中间函数如果说大家写过漏GS啊，或者说写过三个PP啊，像PHP啊，或者Java这些东西里面都有这些概念，像中间键，那么中间键呢，或者说咱们回归到前端里面有一个路由里面的路由是吧，路由也是类似的东西，你可以拿到这个，嗯，路由前后的一个就from to这样的一些东西，然后给他一个next，让他继续往下走，是不是这样很很明白，这个就是也很好理解这样一个情况，所以就是他的中间键呢，能拿到请求和响应，然后可以。

决，那个相当于是一个B包，然后能不能决定继续往下走，你可以在这里面做一些逻辑，比如说我对请求做一些统一的处理，嗯，我可以分析那个请求过的UI，对吧？那么检查里面hi的啊，嗯，或者说他的那个有没有token啊，对这些东西，另外呢，Is呢，就是响应，比如说我可能在那个函数里面写的非常简单，我我想做一个运算，一加一等于二对吧，那我们就直接return一个二，但是呢，我在接口里面，可能大家在做前端的时候都知道，可能呃，有接口是一个对象，比如说他可能有一个扣的代表了一个状态，那或者下面有message代表了一个说明信息，下面还有一个，嗯，那个data是最终的返回结果，可能这样结构化，你可以在这里做一些包装，你判断他的，如果说res类型不是什么样子，你可做什么什么样子的东西，或者做一些统一的一个呃类型处理。

对，或者说数据的包装都是可以在这里做的。呃，另外我看一下还有什么。下面就是一些远程那个模型上面的方法了，我们点点击到一个模型，它会展开有三个属性，有一个普通函数，有钩子函数，还有远程函数，普通函数呢，就是一个模型里面内部的一些函数，就是像嗯，做一些运算，比如说你可能获取到这个。

呃，获取到是什么获取到这个部门，但是呢，你这个部门里面有好多人，可能我要做统计，因为有时候给大家写一个吧，这里比较比如说财务部。财务部门，然后下面可能有五人啊，有两人，然后那个开发部可能有十人，开发的非常多，你想做这么一个数据的时候呢，你可能这个地方是依赖于别的那个，嗯，关联的，你可以用关联的，然后把它拿到它的一些。方法，我拿到一些那个计算结果，然后给它保存在那个对象里面，可能就使用这个普通函数，那钩子函数呢，就是我们这里有一些介绍。搜一下。钩子函数。钩子函数它是在那个access save或者delete前后出发的，这个东西呢，就是关于模型的那个钩子函数，如果有那个。

PHP或者Java以及漏的开发经验的话，有些同学就知道有一些，嗯，在这些生命周期之前，然后保存了之后做一些什么事情，比如说我们可能像你修改密码了，对吧，修改密码了之后。你的这个绘画token是不是就没无效，或者说你需要去刷新你的全局变量，嗯，你可以在这里面去做一些这些钩子函数的处理。普通函数呢，就是啊，这个东西就是刚才我们说到的普通函数，他把远程函数放在最上面的，因为咱们远程函数是最常用的一个一个东西，所以我们重点讲一下远程函数，什么所谓的远程函数呢？就是remote method remote method，其实对应到那个load里面的话，它其实就是能够让外部访问到的，因为内部这些普通函数勾参数就是针对于这个后端服务的。然后远程函数呢，就是针对于咱们APP接口调用的。

我们这里有一个。接口联调，我们先启动一下log。有接口联调的这样一个选项。恩，可以看到这个地方是什么都没有，但是我们是导姿，刚才导姿两个模型吗？我们导入先启动一下。我重启一下啊，不是启动一下。我们要发布一下，并重启环境，是不是我们要发布一下，因为这两个模型，这个department和employee是我们从那个DEMO里面导入进来的，发布成功。发布成功之后，我们刷一下它服务需要重启一下。我看一下。嗯，一个APP的整体使用流程吗？你是说的是APP的使用流程是什么意思，是开发流程还是什么。好，我们先一会对，你先先描述那个，对我们先把这个云数据3.0讲，讲解完了之后呢，我们肯定会要去，那就是我们大纲的第二节课，就是网络交互了，对吧，我们要先把数据，就是要解决一部分同学没有后端经验，或者没有后端同学的，那没有后端那个开发小伙伴的那个情况下，我们自己去写后端或者使用云数据的，这样来构建，快速构建咱们应用的一个过程，所以咱们是第一节啊，因为前面那个时间占用了一部分，所以现在是还是在第一节呢，后面肯定是要讲那个交互的。

对吧，然后这里你看我已经发布成功了，然后有一个收害这样一点开，其实这个就是那个look back啊。集成了一个look在里头。我们把这个还是再缩小一点。这下面的就是一些远程方法，你看它有get post delete。那对应的这个deploy，它里面的一些远程函数对吧。我们在这里做一个，这下面远程函数有三个，看一下这个员工的远程函数有有三个，但它并不是三三个，它是每一个都会生成一个，他有一个自己的有一个，然后有嗯，有一个。

重新生成了一个。他可能是来自于这个勾参数里面的吧，或者说那个。嗯，内置模型里面的，我们这里尝试着去做一个，创建一个云函数，添加一个函数。比如说我们在这里，我们是针对这个，因为这里面model就是咱们咱们刚才建的那个两个model，然后在这里去点选一个，比如说我们针对雇员去做一个方法。类型呢，就是一个远程函数，我们需要让外界能够去访问到他，呃，类型呢，我们选一个选一个get。函数名字我们也非常简单，就是一个list方法啊，这里是名称啊，不是那个方法面，那我们就想想做一个叫做看看员工列表。

这个叫做。雇员列表。这里方我们想list，你看下面就会自动生成这么一个结构，然后我们就是，啊，这个写的太口水化了，我们下面是描述，写的可以长一点，那这里就是。雇员列表。我们这里先。这里可以添加参数，比如说你们可能会传入一些分页对吧，或者说嗯，你只想获取一些男员工，可以传入一些真的什么的啊，你可以这跟咱们接口其实还是非常熟悉的，我们今天就不演示这个了，因为时间有限，然后函数定义这块我们先推一个。又吞一个累了。字符串的。

然后做一下保存，然后发布并重启一下。发布成功了，他这个服务是不是需要重启一下。对，然后我们打开这个。可以看到这个地方就是多了一条类似了，这就是雇员列表，咱们写的很官方很真实的一个四个字啊，就是查看那个列表，我们可以看一下这个地方也写了一个list。恩，然后这就是咱们返回的。稍等一下。这是咱们返回的那个文本内容。所以这里呢，我们就可以相当于自己能够写这样一个接口了，是吧？嗯，这就是它会生成一个cur的一个请求方式，我们可以直接在命令行里面去测试，嗯，或者说能够拿到这样一个地址，嗯，我们就可以在咱们的APP里面举个例子啊，这个地方我们就可以去通过API点按方法去请求，然后这去响应。

那么如何去获取数据呢？这个地方只是做一个单纯的一个字符串，静态的，我们来开始给他获取数据。啊，继续点击进入那个编辑模式。比如说我们这里定义一个定义一个list吧，就叫list是写的非常的笼统啊，我们使用这样一个方法，Model点。Employment。点它是一个models这种就是咱们的一个整个的一个模型对象，它下面会有，它会把咱们整个的模型保存在这里面，然后咱们这个模型不是当前模型，不是这个employee吗？对吧？那么这里可以继续写一个模型的方法3ONE。

嗯，我们在这里可以把这个list返回回去。不是很保存的，是在下面保存。然后重启一下。嗯，这里依然可能还是要等待一下。对，但是现在在启动中。多刷一会儿，嗯，好了。这里就是通过find，他能拿到一个对象，然后我们看一下这find是什么，它是怎么来的。Employment下面的这个数据模型。

哦，我这个电脑不知道为什么，就是可能是我开过代理的问题吧，就老是有些网站打不开的情况。刷一下。挂掉了，略显尴尬。嗯。我们大致来看一下这个精彩文档吧，就是上面还有一些一些新的东西。我们看一下这目录有有一些东西，其实我们只是给大家演示一下主要的使用方法，那么一些具体的一些详细的，呃，细节呢，文档都是写的比较清楚的，我们只要输入这个文档，其实就能开发出自己的一个相应的应用了，我们可以在这里看一下这个点餐的这个后台，就是咱们那个嗯，做开做那个点餐的跟咱们开始做，嗯，后台管理的时候，这个界面就是咱们那个数据云自动生成的，一会也会讲一下这个后台的一个使用。

其实看起来还是非常漂亮，或者说非常正式的，呃，你有这么一个小的管理后台，你作作为微服务，或者说作为一个小的业务场景，都是非常都是可以满足的，对吧。嗯，具体的可以在这里去查看一个模型API，模型API呢，就是针对咱们一个model做一些增删查改的这些操作，对吧，就所谓的CD，那么插入数据呢，就是通过create create呢你可以去定义一个对象，然后给他把这个。插入进去，然后你可以给他返回一个具体的一个响应，还有一个是。Upset，那么就可以去它自动去判断是否存在，如果存在就去更新，如果不存在就去保存。这个有点类似于森培训练，有个呃。Save的方法对吧。还有更新数据就是update war，你可以去，因为他为什么是war呢？他可能会根据条件去筛选，那么前面是一个变量，后面是一个。

啊，前面他是把Dave换成了be的话，那么前面就是一个条件对吧，前面你我会找到所有的里面的manager是de的，那么我会把他的manager换成be。还有删除数据，我就可以把所有的manage是把它删除掉，这就是一个条件，其实说白了就是一个SQL语句里面的一个条件的一个处理。另外呢，下面还可以还有一个destroy by ID的一些方法，这都是删除的方法。其实是那个插入更新删除都是比较比较简单的那个，它的一个特点在哪，就是你写好那个外要条件就可以了，对吧，你因为你的目的就是为了告诉那个服务端你需要删除数据，但是删除依据或者说删除要删除哪一个呢？那么你就是要把这个V条件指明就可以了。

你在这里面对象通过你的一些叠加或者说描述，并且运用一些逻辑关键字，像嗯，握或者and这样的一些条件，然后给他能够嗯找到你所要需要的，更新的或者删除的目标。那么。整改，整改三呢都是比较简单的，然后查询数据是比较复杂的，其实查询数据也并不是很复杂，方法很少，但是他他的复杂点还是在于刚才那个while条件，因为你要通过一些奇奇怪怪的需求，或者说很复杂的需求组合出来，找到你所需要的数据，比如说你们的产品经理跑过来告诉你，你需要一个。嗯，你在你们的那个雇员表里面，需要找到昨天的，然后年龄又又是什么范围的，还有这个性别是什么范围的，并且呢，他在某一段时间有什么操作的这样一些呃条件，然后得出一个结果之后，能够去定位到这么一个数据，然后给返回给前端。

连表查询是可以的，因为它这里面模型是可以连表的，我们先看一下这些基础的操作。因为他这个虽然好像呃。后端是用ES6写的嘛，对，因为他这个里面其实不止是ES6啊，是ES6加他这个wa和think其实是ES7的一个异步写法，就是因为他有时候查那个查询是消耗时间的嘛，我希望大家不管是前端还是后端，因为现在有条件了，就尽量拥抱ES6，这是非常非常。非常好的事情，写出来非常爽的事情，因为大家都在写E6嘛，而且它是针对于咱们的一些开发痛点来做的一些优化，语法堂啊什么的都非常舒服的。呃，关于这个VR条件，或者说这些API方法，其实大家可以把它当做一个模块来去学习，嗯，对待学习就可以了，写的还是非常详细的，这上面应该是可以囊括所有的一些情场景和情况的。

还有一些地理位置的支持，因为这个好像是基于蒙果DB做的一个后端服务，那么蒙DB本身是支持那个空间地理位置的类型的，他做这方面实非常非常擅长的，那么我们就可以去，呃，去做这么一个操作，像地理位置咱们做什么呢？就是说像做外卖，你或者商家距离你多少米啊，这些东西都非常方便的。还有一些过滤器，一些排序啊那个。操作服务，这就是我刚才提到的一些逻辑，逻辑货，然后在一些条件之内。对吧，其实具体的我并不是太多使用过，所以嗯，只能说带大家看一下文档，然后怎么去使用，如果说我要学习的话，我肯定也是只看这个文档。

嗯，对于一些微服务或者说小的应用还是非常实用的，我们再看另外一个东西。嗯，就是数据云的另外一部分，可能有印象的同学还记得，就是这个页面是咱们通过那个接口链条那个按钮点进来的，他这个地址目录也很有特点，就是在文档里面其实也说到过了，给大家找一下点div，通过这样的关键词搜索。这是咱们的API的接口地址对吧。然后如果你启用那个生产环境的话，就是PD。然后前面那个星号其实就是咱们的应用ID。所以你如果说要找到这么个地址非常简单，你在你那个控制台后面看一下你的那个应用ID，然后连上后面的这么一个地址就可以了，它是固定的。然后这是API的这么一个目录，它会使用那个look back给大家看一下咱们刚才创建的这个接口。

嗯，并且他其实是支持那个token啊，或者是说session这些机制的，然后我们来看一下另外一部分就是那个管理后台。把这个API改成爱me。有什么办法实现获取指定数量随机数吗？这个是你的GS基础啊，对吧。然后我们进入把这个刚才就是API嘛，然后改成I密，然后后面去掉去不去掉都可以啊，然后就进入了咱们的后台管理。这个是咱们新开的，那默认好像密码是艾德密，嗯，123456。这进来之后呢，就是非常。简洁的一个后台，然后咱们可以通过页面管理。给大家演示一下。嗯，因为这个它是基础功能是最基础的，就最底层关于偏向于管理端的一个配置，就是用户角色和菜单页面。

其实说白了就基础配置是你整个的一个后台的一些东西，通过获取随机的视角，这个应该也是可以的，嗯，其实获取随机的这样的话。嗯，在MYSQL或者说芒果DB里面，它是都是非常消耗性能的，你可以就是说可以尾随机，怎么说呢？就是你先获取获取这个十个随机的ID，对吧，然后你再去通过查询这个嗯ID，然后把它作为一个ID集，这些都是一些查询的一些技巧，我们可以后面去，嗯去那个跟大家交流，或者说你在论坛里面跟大家去交流这个云数据的一些技巧。那这里有，我们先点到那个页面管理啊，点一个新增页面，比如说我们就叫做雇员管理，你看这个雇员管理就是我们非常带有业务色彩的一个名名称啊，然后比如说我们叫。

然后他可以选择两种类型，一种是一种是页面类型，一种是c rud类型。我们因为这个固源管理，它其实什么叫所谓的C点，就是刚才我说的正常查改嘛，然后它对应的就是我们可能想操作这个。雇员的模型对吧。呃，然后我们的这个现在它只是增加了一个页面，我们还需要在菜单管理里面把它，把它附着在这个菜单上面。我们上这个不选，那么就是在顶级的我们选一个吧。选一个，比如说技术功能，我们就在技术功能里面，比如说雇员管理。链接呢，就是刚才我们写的那个路由，还记得吗？图标的话，I开头的这样一个图标集啊，我随便写一个，不知道有没有排序的话，我写一个一，它不是外链，它是内链嘛，对吧，状态显示你确认一下。

那你再刷一下。好像还没出来，没出来原因是因为角色管理里面，因为我现在是艾密是属于这么一个管理员角色的，他是需要给他增加到那个，你看没有勾选上，给他勾选上之后呢。确认一下。再刷新一下。我们看到这个雇员管理已经出来了，对吧，什么后台啊，这就是这个就是咱们那个后台，就是云数据云3.0的后台，就是我们通过。对，没错。我给大家其实是，嗯，在这里演示啊，但是我的那个学艺不精，就是说因为我的确用的不是太多，那么希望大家能够看一下文档，并且这里有一个成品，就是我们那个点餐项目。

嗯，我们先看一下这林同学，我们先看一下这个后台的一个就成品的效果，我们给大家讲一下如何使用，嗯，这个后台的话。参数配置这些，然后我们再讲一下如何跟前台关联，会讲到的，我刚才怎么进来的呢，就是刚才这个地方是A对吧，然后把这个API改成din。我要怎么给大家放大一下呢，然后给大家重点提一下这个地方。这个地址就是API接口对吧，我们把这个API，然后改成那个艾德密。这个地方改了，改成他的命，然后进去之后呢，就是那个管理后台地址了。我给大家改一下。那就进来了对吧，然后我们进行一些页面配置，然后菜单配置，还有你这个你可能会增加一些用户角色组，比如说你可能要增加一个开发，或者增加一个运营什么的。

那角色标识你可能给他一些。呃，一些标识，然后权限，你可以选择你具体的一些页面，比如说你你给到那个运营，你可能只是想让他看到订单数据，那你勾选一个订单数据之类的，我就举个例子，那么你就给他一些权限，那他账号登录进来之后呢，刷新他只能看到你它所在的权限的那个。嗯，见面。所以我们这里有个成品就是唐氏点餐，这个也就是咱们对应那个点餐的后台，我们在这里看到一些。他把这个这些一些系统功能都放在那个高级功能里面，其实是做了一个优化，因为毕竟他这个地方都是可以可以调的嘛，可以编辑的嘛，你可以把一些不是它那个默认的一些选项放这里来，这基础设置就是关于咱们那个应用的，然后还有一些订单的，对吧，你看这些下单的，这就是我刚才在这个看这挂掉的活复活了没有啊，哎，起来了。

这个页面有点凉，有一点。所以我们在这里看到这个非常就是刚才我要说的这个就是。看到金一是吧，我们就通过find one查到，查到这条数据，我们再通过一些条件，比如说我不想查金一，我想查一个女，真的为女的对吧，就是性别是女生的，那么我们就可以查到一些所需要所要的数据，那么咱们做登录的时候，比如说做一个登录逻辑，你可能要输入一个用户名，输入一个密码是吧，那我们就去，比如输入一个用户名叫金一，密码是123456，那我们就后端去做的时候，就可以find个这个类目等于进一，并且密码等于什么，如果没找到，那就是抱歉，你找那个用户密码失败之类的，那你可以做进一步的逻辑处理，比如说先找这个用户名，然后去判断他密码对不对，是不是这样。那么还是回到这个演示这个后台，它有些。

能够看到咱们那个啊菜品管理。看到这些图片和视频，是不是非常熟悉啊，这就是咱们那个点餐的那个。测体，而且这些属性呢，嗯，都是。我看一下啊，我这个后台应该是能看到的。点餐的啊。唐诗点餐了。这就是定义了一些故事。比如说你看。这个模型里面。它有一些米饭，黄瓜，韭菜，然后对应的咱们这里面就是米饭。韭菜黄瓜对吧，他是这里有一个可视化的，就比较类似于已经像后台管理系统啊，对吧，然后可以去筛选啊，删除啊这些操作，这些东西都是可以通过。配置，然后去生成的这个并不需要你开发的，那这个配置咱们用的是一套开源框架，是一个我看给大家看一下啊，是百度的一个开源框架。

是使用的这这个a misd代码全能框架，它是使用接的配置页面的，然后。他可以通过这样的一个用接形式来描述这么一个页面，对吧，你可能有一些渲染，有些那个筛选，有一些字段，有些按钮，一些操作什么的都可以去配置，然后我们可以去看这些文档，然后去深度学习这个如何去做出这么一个页面，你看这个其实也是。呃，都是通过街上去配置的。对吧，这个页面具体有什么内容，或者是这个地方会出现哪些字段，咱们肯定都是通过那个配置，其实这个地方也是属于一个地代码，咱们不需要去考虑，呃，咱们GS提交啊，什么事件啊，没有就是去把这个结论写好，那就完全没问题了。嗯，这个代码的话，如果有有机会再跟大家分享一下这个里面怎么写的，或者说好像是模板里面应该就带的有吧。

然后呃，店铺设置，这就是咱们看到的那个一些基础的信息，然后这个后台就是这么个用法，大致的就可以看一下那个文档，或者说咱们自己去玩一玩，怎么去弄，嗯，我们时间的话也快差不多了，我们再讲一下后面的一部分。我今天可能得拖点堂了，可能然后再讲一下网络交互和本地存储，如果说有这个，其实咱们这个是比较基础的，还是比较基础的，除了云数据3.0的话，这一块是比较新奇一点，对于我来说都是比较新奇，因为这个产品也是刚刚推出的，就是咱们。作为低代码开发，或者是说云开发的一个重点，嗯。我本身呢，也可能没没有太多的时间来去学习这方面的东西，就希望大家跟我一块就齐头并进，嗯，然后我们看到这后面这一这一部分其实是网络交互和本地存储，嗯，我们来到群里面的大部分可能都有一些开发经验，或者已经做了很多的成功的商业项目了，那对于网络交互管理存储可能已经不太陌生了，那我们这里还是给大家。

嗯。给大家讲一下，或者给大家给那个新来的小伙伴们在就普及一下，因为很多你看评论里面都是问如何去关联对吧。后台管理肯定是免费的呀，因为它这个东西就是你只要云数据一开启之后，它就会有这一套东西。是吧，至于就是说那个其他的收费的那些都是按运营数量，比如说那个资源消耗的呀，或者是说呃，服务器的这些东西，这个你看一下那个运营方面的定价策略。后台管理这些代码肯定是免费的，那些功能都是属于属于咱们后台那个控制面板的一个一部分，对吧，可以通过API分析或者API调试这些。

嗯。你看这个其实都已经嵌进来了，都一样的调试，然后我们说到那个数据网络交互。网络交互的话，就是咱们在星期二的那节课里面讲到的那个，咱们的核心方法就是。文档里面的API的阿贾克斯方法对吧，咱们这网络里面是有一块的。你可以通过这一块的啊，这个方法，然后它是一个核心的请求库啊，嗯，现在已经因为要兼容那个H5和小程序嘛，所以他其实已经转移到那个上面去了，就是也可以兼容的，咱们只要好好的看一下这些提交方法，嗯，就能实现那个跟后端交互了，对不对。我们不是写了这么一个接口嘛，我看看我亲手写的接口。是哪一个是这个list对吧，雇员代表。我们就在就在我们的那个代码里面给大家现场演示一下，因为这个就是我们的DEMO3，我们今天不写DEMO3，要写DEMO4，因为咱们是第四节课，比如说我们先定义这个数据。

女吞一个。咱们这个返回的是一个对象是吧，那我们就可以给他搞一个，不是咱们是find one嘛，是吧，那我这个性格不一样，我写了个list，其实是翻只3万的一个人，那我们也不改了，就是把他就类似于就做了找了这么一个人吧，你就理解为他是用一个条件千挑万选选出这么一个角色，你想显示这个页面对吧，那么这里比如说叫做。啊，它它是瑞腾了一个。有同有对象。对吧，那现在还是空的，我只给他一个force。

他没有，然后在那个MY里面呢。因为每个页面是可以提交那个。Method。嗯，比如说get这个类似吧，虽然是一个人，然后我们使用API点方法。那这有代码提示的。他把这个整个的一个框架已经给你搭出来了。请求的，其实就是这么一个请求啊，用get请求，然后地址就是这个。嗯，这里是一个回调，那么这里可以输出一下。Ret和ER。Am就是共用的这个A点艾克斯啊，我说昨那节课提到的就是咱们这些文档里面的API，就是开发者文档，咱们的端API是没有被弃用的，这是完全兼容的，或者说他就是一个核心方法，明白吗？就是咱们要使用这个api.i贾方法。

所以这就是咱们新方法，而且我就说他已经转移到小程序和外部H15端了，什么也没有啊，我们没有调用嘛，对吧，我们没有调用，只是把这个方法定义出来了。我们可能会在那个加载好之后给他做一些，比如说像。Instead方法里面去给它调用一下这个方法list get list对吧。我们再编译一下。啊，又有一个未定义，他报错了未定义，不好意思，这里也不应该有这个。可以看到这个地方已经在network面板已经有一次请求了，对吧，在proe里面已经拿到数据了。

咱们只要把这个东西走通，或者说能拿到数据，是不是就可以跟咱们自己写的接口做一些。配合了呀，你看这个地址就是，嗯，咱们刚才写的一个地址，然后拿着这张数据，然后我们在这个地方是不是用那个打印打出来了，然后他是一个，他是我们代码怎么写的呢？就是。一个数数组嘛，那it是有的，那ER没有的是吧，我们可以把这个整个拿到，然后给他复制给，当然他这个是写的一个。写的一个EES5的那种啊不，它不是，它是以前那种函数，推荐大家写成ES6的线头函数，这样的话就是。把这个直接写成监测函数。我们这里。在打印这个it的时候就没有问题，你还是没有问题的，先试一下。

对，现在只有it了这个对象，然后我把这个对象给到咱们的data里面去点data。嗯，这叫什么employee。等于it。然后嗯，这个的话，你看我如果说使用箭头函数，就直接不需要就是保存什么，我们之前可能会在这里，呃，声明一些这样的写法，比如说什么that啊，等于this。这样的一些东西不需要了，没有必要，而且非常的麻烦，然后我们把数据给到了之后呢，它因为它是响应式的，我们在这里看看它能不能输出这个employ。我们先先那什么，看看这个它能不能作为一个字符串，能不能渲染上去，一点一点排查，对吧，这个样一数据帮定是没有问题的，函数里是可以这么类似的，我刚才说了就是专门提到这个建筑函数，我们这样的话就不需要去写那个变量了，你看这个是渲染出来，只是说在这个地方我们这样。

在这里给他转一次啊，因为为了快速快速演示嘛。对不对，现在渲染出来了，渲染出来之后呢，我们是不是比如说那我们可能只需要名名称啊，这个地方，我们比如说这里这样渲染。是不是因为加空格的问题啊这个。好久没这样写了。然后比如说test姓名。我们就可以通过这个点类目的方式把它点出来。这个就是这就已经非常的接近咱们最终要去实现的效果了。把这个IP还这个还回去。

对吧，姓名金一，这个已经出来了。那。至此呢，就是咱们前后端已经就能够交互了。包括你就说这个数据是从后端来的，那么咱们后端如果说对这个模型数据进行修改或者是什么，他就完全可以去实现这么一个功能和业务逻辑了。呃，另外呢，看一下时间已经到差不多了，然后呃，还有一个网络，还有本地存储和一些优化点，我是备课的时候写了一些东西。嗯。大家看一下。有这么一些东西，嗯，是关于就是时间有点晚了，那么而且我看了一下第五天的。第五天的那个课程还是比较少的，所以我们就正好放在第五天把这些东西，因为这些东西都提有助于提升咱们开发的一些相当于是最佳实践啊，或者是说一些开发技巧，对吧，咱们就把剩下的东西请求封装啊，那些东西放在那个名的课程好吧。