day17/下午/349-尚硅谷-尚融宝-标的列表显示的前端整合

好，那我们来看这个前端的整合，那么和之前的列表都是一模一样的啊，所以这面呢，我们就快速的把它创建出来吧，Land里面的list啊，先创建一个，然后land，我们未未来呢，还有标的详情里面的detail，再创建一个，然后呢，路由给它配一下，对吧？所以呢，这是第一个步骤啊，创建list，创建d to配路由，好，那我们在我们的号里面呢，啊，先新建一个目录啊，叫做land，然后呢，在这个land里面呢，我们新建一个文件叫list，然后呢，再在这个land里面呢，我们再新建一个文件叫detail点六好那么这个。De，对吧？De，对吧，好，然后呢，我们把这个给它复制一下。啊，放到这个类似点里面去啊，这个是列表页，然后接下来呢，我们再把详情页的这个基础的结构给它复制一下，放到这个详情页里面来，好，这是详情页，然后再接下来呢，我们找到router，然后呢把这个路由，这个呢咱们也给它粘回来吧，好，这是路由，然后呢，找到这个。

路由的这个index，那粘到哪呢？你找一个你喜欢的地方，系统设置数据字典标的，我我粘到借款下面吧。然后粘到这儿啊，保存一下啊，然后接下来呢，咱们看这个页面吧。这是后台的页面啊，标的管理在这儿呢，然后我们去点一下这个标的列表，好，那这块呢，就是我们刚才的标的列表了啊，所以呢，这块是前端整合的第一个步骤啊，然后接下来呢，咱们去把刚才咱们不是在后台写了一个API接口嘛，把这个API呢也给它定义出来，所以呢，创建一个烂点JS。那所以我们在啊API靠下面啊，创建一个烂点JS，然后接下来呢，这面我们复制一下，好嗯，粘贴进来啊粘贴进来之后呢，我们就嗯有了这么一个API了，那我们在页面脚本里面是不是就正常可以去加载它了，好那么在哪写呀，是不是在我们的views啊，然后line类里面写呀，好，那这个列表呢，和刚才我们啊上啊就是前面写的这个借款管理的这个借款列表呢一模一样的啊借款列表呢啊前面啊就是我领着大家又写了一遍，又回顾了一下这个流程，那么标的列表这块呢，我就不写了，咱们直接粘过来就好了啊，咱们就不在这浪费时间了，好那么我页面脚本这块呢，我先粘贴一下。

把它复制一下，然后接下来呢，呃，Land类这块脚本这面呢，我直接粘回来，跟刚才一模一样哈，我们先import一下这个land，然后定义list，然后呢，Create里面去加载这个fe data fe data呢去调用刚才的这个接口就可以了，所以呢，现在这个this list呢，如果没有什么异常的话，他应该已经绑定上了，所以我们可以检查一下F12。

然后看一下这个view啊，看一下这个APP layout APP啊里面的这个list，这个数据呢，我们已经绑定上了，好绑定完了之后呢，咱们就可以做页面渲染了，渲染也是一样的，跟前面一模一样，所以咱们也不浪费时间了，直接呢把它复制过来了，好然后呢，在这个地方呢，我呢就把这个列表列的内容呢，把它粘贴到这就行了，好，那这块呢，就是所有的内容了。嗯。然后这列表页呢。现在呢，就就展示成这个样子了是吧？啊好，这是整个这个列表啊，标的编号金额啊，我想再添加一个列吧，就是刚才咱们的那个还款方式是吧，咱们在这个地方不是扩展了两个字段嘛，一个是募资中，还有一个呢是还款方式，还款方式呢，既然都已经取出来了，然后这个列表里面呢，其实好像并没有写哈，我们给他填上吧，要不然白获取出来，所以呢，在这个嗯地方呢，我们去写一个还款方式，还款方式啊，然后呢就是吧。

还有米点什么的。Perter点这个这样写看一看。好，这个还款方式就就写到这了是吧？啊然后呢，它这个大小就是课下就是关于它的宽度啊什么的，大家再自己调一调啊，像这个细节的我就不调了啊，然后呢啊，你像木字中这一块，实际上也可以去这样写，就是你看我们用的是template这种写法，对吧，实际上也可以这样写。就是直接写status就好了啊，除非你想就是啊，再有一些其他的样式修饰什么的呀，你可以在这个地方去扩展它，所以最简单的方式这样写其实就可以，这块是状态，状态啊都可以这样去改一下，就这块就比较灵活是吧？啊好，那这样的话呢，我们这个就就写好了啊，但是因为我现在屏幕广播啊，设置的电脑的分辨率比较小啊，就是为了让大家所有的人都看清，所以这边就比较挤哈啊，如果要是设置成咱们正常的那个电脑的分辨率的话呢，它就不会这么挤了哈，所以这块我们就先不管它了啊，那这块呢，就是我们的列表页的一个。

这个整合。