day05/下午/098-尚硅谷-尚融宝-综合案例

最后呢，我们写一个综合的例子，这个综合的例子呢，就是结合我们前面所学的知识，我们呢用呃ex从我们的后台获取到数据，然后呢，再用view啊渲染到我们的页面当中，当然我们获取到的数据呢，是一个列表数据，那我们的要用啊我们的列表渲染，将后台通过ex access获取到的数据展示到我们的页面当中，所以我们呢，创建一个文件叫综合实例，好，那这综合案例呢，我们把这个DEMO里面的内容呢，还是给它复制过来好，然后接下来呢，我们在我们的呃这个element这个里面呢，呃，在这个element这个下面呢，我们定义一个data，那因为我们要获取到的是后台的用户数据，所以呢，我们在这个地方呢，先定一个user。

类啊以便呢，在啊后面我们获取到用户数据的时候呢，去存储这个用户数据，那我们希望呢，我们的页面一加载就能够去向远程的服务器发送一个阿贾克斯请求，去获取我们的后台的用户数据，所以呢，在这个地方呢，我们可以写一个create啊，只要页面创建完成之后，能够访问到页面当中的这个成员呀，能够访问到页面当中的方法的时候，那我们马上向后台发起啊这个阿贾克斯请求，然后呢，去调用我们的远程数据库当中的数据，所以在这个地方呢，我们写一个create啊，Create里面呢，可能页面初始化当中要做很多内容，所以为了更好的让我们这个啊页面就是的可读性更高呢，我们一般情况下呢，会把每一个部分的业务逻辑呢，都写在一个独立的方法当中，所以这块呢，我们可以写一个method，然后呢，我们可以写一个叫做show user list，展示用户数据啊这样的一个方法，然后呢，这个地方呢，我们。

就可以通过icon SE啊这个访问远程接口啊，那接下来呢，我们需要在C这个里面呢，去直接调用这个这四点啊，Show users list，好，那这就是我们整个的一个页面的一个基本结构了，现在呢，我们需要解决的问题呢，就是在这个位置通过ex呢去访问我们的远程接口，所以首先呢，我们先找一个X的脚本库啊，把它复制过来。好，复制到这个里面来，然后接下来呢，我们还是找到刚才我们的这个综合案例，先把这个xus的这个脚本库呢，给它引进来，那这边呢，我们写艾sales，好，然后接下来呢，我们在。这个嗯，Methods这个里面，嗯，在show user list里面，我们通过这个ex access呢，去调用我们之前的远程的接口，那我们之前调用远程接口的方式呢，其实我们之前已经写过了，所以我们可以参考一下我们之前写的这个XPO里面的index.html看一下。

首先呢，我们可以在这个位置呢，先初始化一个request是吧，把这个给它拷贝过来。综合案例，好，我们在这地方初始化request，那为了让这个代码更简洁呢，就是不是特别必要的，我先把它删掉，这样的话我们能够更清晰的看到这个代码的必要的结构，好，那我们把这个EXO啊给它初始化出来之后呢，接下来。我呢请求拦截器和响应拦截器，我我先不写，咱们直接呢发起远程请求，那发起远程请求呢，我先直接就写第二种方法了，好，然后呢，接下来呢，我就直接request把它复制一下，然后在综合案例这个地方呢，我们把它放到我们初始化完成的这个request这个对象后面，然后通过这个我们刚才初始化的这个request对象向远程的user类呢发起一个请求，好发起完请求之后呢，我们来看一下拿到的这个response的值是什么啊，先来访问一下这个response，好，那接下来呢，我们先右键访问一下我们的这个综合案例。

好，F12啊，然后接下来呢，我们来看这面呢，就是获取数据成功，然后response里面的值呢，就是response data了，对不对，好，然后我们把它展开，展开之后呢，贝塔里面其实就是我们的这个。要的这个数据列表了，那这样的话呢，我们在这个位置可以呢，将我们this.user list的值好。用response来给它赋值，这样这样的话呢，我们的this user list呢，就有了用户列表这样的一个值了，然后接下来呢，我们可以看。在没有这个里面。我们看root，我们的user类里面呢，就有了值了，这个呢，就是我们从后台获取到的用户数据，那做到这之后呢，大家就知道了，我们如何把这个数据渲染到页面当中呢？我们只需要用这个条件，这个列表渲染的方式，把user list渲染到我们的页面当中就可以了，所以呢，我们来打开我们的综合案例，然后找到我们的页面的HTL代码的部分的内容，然后呢，在HTL代码当中呢，我们想把页面的这个呃内容以表格的形式展示出来的话呢，我们就写一个T，好，然后里面呢写一个TR啊，然后TR里面呢，我们可以写一些TD，对吧？好，TD的话，比如说我想写四个，四个的话是乘以四，然写四个TD，然后接下来呢，这里面呢，分别包含有序号啊，有序号，然后呢，有。

姓名好，然后呢，有这个年龄好，还有email。

好，我们呢，就写这样的四个列，然后接下来呢，这四个列呢，我们是希望能够被渲染出来啊，并且呢，是通过列表渲染的方式渲染出来，所以呢，在下面这个TR这个地方呢，我们就写一个v for，然后接下来呢，那上面这块呢，我们v for的是user list，那么user list这块呢，根据之前我们的经验，我们写一个。Item，然后呢，In that，好，然后序号这块呢，我们就写in that加一好，然后姓名这个地方呢，我们就写。哎，这么点儿。应该是我看一下啊，姓名这块呢，我们应该是。Name是吧？啊，然后那个是age，然后就是email啊啊然后呢，我们这边呢，就是name，然后同样年龄这块呢，我们就是age啊邮箱呢，我们就是email，好这面是age，这面呢是email。

那这块呢，就是我们整个的一个列表渲染的过程了，那接下来呢，我们来看一下页面，页面呢，整个的这个后台的这个数据呢，就通过我们这样的一个ex，再结合我们的view，就整个的被从后台获取出来，并且展示到页面当中了啊，所以说呢，这就是一个完整的前后端分离开发啊的一个综合的一个例子，那么做到这之后呢，大家可能会发现啊，这个接下来我们要做的呢，其实就是美化这个页面了，因为目前为止呢，页面的数据虽然取出来了，但是不太好看，尤其呢是针对于我们后端程序员来说啊，如果呢，想让咱们去对这个页面呢，做一个美化，而且还要美化的高端大气一点，那确实是比较困难的，那所以有没有什么简单的方法能够让我们在没有前端这个页面设计没有前端这个布局啊这个。这个呃，基础知识的基础上，能够还让我们做一个比较高端大气上档次的页面呢，那这个呢，就要依赖于我们后面要学到的view UI组件库了。