day16【前台】项目展示/11-尚硅谷-尚筹网-前台-首页显示项目-代码-页面-显示项目信息

好，那么下边呢，我们就往下看这个项目的信息怎么去显示。项目呢，它是我们的，你看啊，在type里边有这么一个list。我们用的是type里边的这个list显示的项目信息。那这里边儿呢，我们就还是先做一个判断啊，咱们得去看一下这个项目呢，也有可能这个时空的。那就是说我们得先确定一下啊，具体到底是哪儿是这个标签是。哪一个点位标签和我们一个项目呢是对应的。这里边儿大家看到这儿有这两个点位，我们去给大家去看一下，这个肉就是行的意思，所以说这个肉呢，其实它对应的就是我们这一行。这个呢，咱们从他原来的页面来看一下。随便找一个地方啊检查。找到这个div的肉。找到这，哎，大家看。当我把鼠标放在这儿的时候，上面呢被浅蓝色覆盖了，也就是说呢，这个时候这个标签呢，对应这一行，然后呢，你看当我们鼠标移动到。

COMD3这个地方的时候，它对应的是这一块。那你说我里边这个也是一块啊，你像这个thumb nail这个这不也是一块吗？呃，但是这个东西是包在这里边的啊，所以说这个呃，并列着来看每一个。Call。MD3对应的就是这一块。啊，所以说你看这四个项目这边就是四个三。啊，所以这个时候对应的关系就是这样这样的一个东西去对应的，对应的就是我们这个整个的这个项目啊，然后是Co MD这个东西对应的就是我们的这个。呃，具体的项目。所以说在这儿呢。但是我们稍微给大家提一下就是哈，这为什么是为什么，这有这个什么意思。肉就代表是行，不用说了，CL呢代表是列column缩写，MD代表是中等大小的。三呢三表示哈，总共是12个格，一行是12个格，我这个呢，我这个div要占三个格。

那么你想12除以三不就是四嘛啊，所以一个项目占三个格，那么正好不就四个项目啊，它是这么算的，这是一个我们不strip啊，它里边布局的一种方法。所以说我们可以在这个肉里边来做这个判断，判断我们这个项目是不是存在的。TH的if。呃，我们去判断一下，判断个啥呢，井号。Is empty。哎，这里边儿我们要访问的是这个tap点。这个属性名。哎，就是说调用我们内置对象的empty方法。检查type的这个属性是不是为空，如果为空的话，我们这写上说没有加载到。啊，这个任何的，呃，项目信息啊，但是这么说有点生硬啊这个。

万一要是有这个被用户看到也不太好，这应该我们这么说吧，啊说。更更好懂一点，就是说该分类下。啊，还没有任何的项目。把这个加上，然后呢，如果不为空。Not不给空，那么我们这儿呢，就是把下边的这个。包起来。看看到哪哈。看看对不对哈，应该是从这儿开始，哎，到这儿结束，对，把这一部分呢，再往里边缩紧一点。把他的QMD3这个东西给包起来啊，因为每一个这个东西呢，对应一个项目。那么这个时候呢，既然它不被空，咱们下边呢，就可以去便利它，便利它呢，咱们在这个地方呢，去写我们的PH。

这个诀窍呢是这样的，大家你希望哪个标签重复出现啊，哪个标签是便利的产生的，就在哪个标签上写TH。哎，这里边儿呢，先起一个名字叫project。哎，然后呢，从。啊，要便利的是他。哎，从请求域里边取出来啊，其实是从上一个便利的结果里边取出来type type里边再取出来这个属性去便利，便利以后的每一个用project去引用。然后呢，下一步呢，就是往里边去挨个去填这个属性啊，你看这个地方去限制了这个它的长宽和高了啊尺寸了，这个就不用我们管了，这个src这我们要改一下。它呢，就是我们project。

里边的每个属性呢，找一下。Hy PE part。这是一个。这个呢，是我们的叫。呃，项目的名称，TH的text。Project project。再往下。这边这个呢，是我们的一个，哎，筹资的，筹集的金额在这儿，我们也是把它给包起来。我们用这个四瓣啊，把它给包起来。在这里边写一个TH的text。还是哈，咱们尽量不破坏人家这个页面原本的这个结构。让前端工程师还是能看到这个地方，原始的这个值。那这里边儿应该写project.money。复制省的我们敲的话敲错。

哎，这边这个日期哈。把他的原始数据拿过来放在这，然后呢，这边去调用一下，我们这个数据叫deploy data。再往下呢，过来看，这是一个进度条，这个进度条呢。呃，你看这个有一个now，就是当前的这个值面最小值max最大值啊，那最大值最小值不用管，我们要改的是当前的值。哎，把这要改一下，把这个地方要改一下，这个地方要改一下啊。呃，所以说呢。先改这个属性啊，CTRLC。TH冒号，CTRLV。这是什么呢？Project percentage。

哎，这是一个地方。然后呢，是。这个命和max不用改，然后style这要改一下。Style呢，我们说这个Y的冒号，空格，百分号这些是死的哈。啊，所以说这些怎么办呢？我们在这里边用单引号哈，表示它是个字符串，把40呢变成一个动态的值。哎，所以说这应该是这么写哈，来大家看哈。嗯。单引号加上哎这个东西，然后40这部分。进行一个奏串的一个拼接，拼接的是谁呢？就是他。哎，单引号里边的东西是死的啊，就是字符串啊，就是字符串中间呢，加上一个我们动态生成的部分，就是那个百分比。

哎，包括下边这儿也是啊，这边来一个TH的text。哎，这边也是哈。这边是。怎么样？先用它拿到40，再加一个百分号。包括它百分号后边有个空格哈。这空格无所谓哈，这个有点强迫症。好，这边是一个支持的人数，支持的人数呢，我们也给它放到一个label里边。要放到一个SPA里边哈。TH的text。Project supporter。啊，页面呢，我们从上到下呢，咱们都都都给它改了一下，然后呢，咱们再相反，咱们再从这个角度哈。

咱们从这再来看一下，从这再来读一下。Project ID它应该用在哪呢？将来你去点这个超链接的时候，这个项目的名字吧，你点这个超链接的时候，它应该跳转到这个地方。这是我们将来去显示这个详情的。我们这儿呢，咱们不妨就把它直接给加上啊。哎，加上圈大括号，这个是我们去解析我们UR地址啊，把开头的斜杠解析成pass。然后呢，在这儿呢，我们叫做来一个。呃，这都属于我们这个下边的啊，首页的。这个project detail。哎。是这样的一个地址。嗯。点它，然后后边呢，我们来一个。我们要加上哈，我们要加上这个project ID。这个怎么写呢？

从我们这个project里边呢，去取出来project ID。哎，其实也是哈，这个加号表示一个纵串的一个连接。这个，然后project name这个我们已经用到了。啊，在这儿用到了。我们现在对一遍是避免有遗漏哈，Had picture pass在这用到了。Money。在这儿用到了。然后呢，Deploy date。哎，在这儿用到了。Percentage。Percentage有好几个地方啊，是这三个地方用到了。这儿这儿这儿这三个地方。然后support，哎，Supporter在这，哎要这么看应该是没有遗漏了，我们就都给它加上了，所以说下一步呢，就是我们要去看一下啊，这个页面上刷新一下，看一下它显示的效果。嗯，这时候你看这是一个分类的信息，下边是我们的项目的信息科技的5432是因为我们circle呢是倒序排列的啊，取的是四个，所以这显示就是这四个。

然后呢，这边是一个总金额，哎，包括日期啊，百分比啊，这都是我们从数据库里边查出来的。这个有的多有的少啊，这个数据是不一样的啊，数据是不一样的。呃，包括每个分类下边这个项目呢，也是不一样的啊，这是这个我们去准备这个测试数据的时候呢，故意去给他准备成这样的。对，我们再看一下那个我们的project ID啊，这个超链接，这显示的是不是正常。这边port project detail9是吧，哎，这个地方串连接呢，也也OK。点一下啊，这边他说我们现在还没有登录哈，好。呃，那么这个地址的话就应该放在，呃，放在哪哈，其实这个应该是到我们的这个过滤器啊，住的过滤器里边去改一下啊，这个看项目的详情，这个应该是不需要登录的。

啊，因为你看嘛是吧，哎，等他需要掏钱的时候再让他去登录。