nodejs+ejs模板进行单列测试

定义假json数据,本地项目


Livebroadcast文件:

{
    "livebroadcast": {
        "insuranceContractNo": "01",
        "applicantName": "直播推荐",
        "query": {
            "id": "9",
            "videosnapshot": "/images/0.jpg",
            "userAvatar": "/images/istest.jpg",
            "userName": "一盒小小酥",
            "userTxt": "暴走的孙尚香",
            "forwardingnumber": "5990",
            "audiencecount": "5990"
        }
    },
    "playback": {
        "insuranceContractNo": "01",
        "applicantName": "直播推荐",
        "query": {
            "id": "9",
            "videosnapshot": "/images/0.jpg",
            "userAvatar": "/images/istest.jpg",
            "userName": "一盒小小酥",
            "userTxt": "暴走的孙尚香",
            "forwardingnumber": "5990",
            "audiencecount": "5990"
        }
    },
    "video": {
        "insuranceContractNo": "01",
        "applicantName": "直播推荐",
        "query": {
            "id": "9",
            "videosnapshot": "/images/0.jpg",
            "userAvatar": "/images/istest.jpg",
            "userName": "一盒小小酥",
            "userTxt": "暴走的孙尚香",
            "forwardingnumber": "5990",
            "audiencecount": "5990"
        }
    }
}
index.js

var express = require('express');
var router = express.Router();
var http=require("http");
var fs=require('fs');

/* GET home page. */
router.get('/', function(req, res, next) {
    fs.readFile('./livebroadcast.txt','utf-8',function(err,data){
        if(err){
            console.error(err);
        }
        else{
            var str = JSON.stringify(data);
            var date2 = JSON.parse(str);
            /*console.log("长度是:"+arrMongodb.length);*/
            res.render('index', { title: 'Express',lists:date2});
        }
    });

});

module.exports = router;

数据放在ejs中不能进行随机拿去或遍历拿去数据,每次显示数据格式不对,json.parse后不能进行foreach遍历,显示格式不正确,提示不是数组形式

index.ejs

<%  var aaa = JSON.parse(lists);
    var cont = Object.entries(aaa);
for(var i=0;i<cont.length;i++){
    var conts = Object.entries(cont[i][1]);
%>
<div class="container_div">
    <div class="container_div_title"><%= conts[1][1] %></div>
    <div class="glyphicon glyphicon-chevron-right"></div>
</div>
在我苦思冥想了好长时间就想到用obj进行构造,也可以用foreach进行循环遍历,可遍历出来的效果差强人意就选择了for循环直接取了,使用for循环多注意生命周期与所需数据所在的位置才能更好的自动化渲染页面
整体取值的index.ejs
<%  var aaa = JSON.parse(lists);
    var cont = Object.entries(aaa);
for(var i=0;i<cont.length;i++){
    var conts = Object.entries(cont[i][1]);
%>
<div class="container_div">
    <div class="container_div_title"><%= conts[1][1] %></div>
    <div class="glyphicon glyphicon-chevron-right"></div>
</div>
<table class="table">
    <%  var aaa = JSON.parse(lists);
        var cont = Object.entries(aaa);
    for(var j=0;j<2;j++){
        var conts = Object.entries(cont[i][1]);
        var contsw = Object.entries(conts[2][1]);
    %>
    <tr>
        <td>
            <div id="table_div1" class="container_table_div1">
                <img src="<%= contsw[1][1] %>" alt="..." class="img-rounded">
                <div class="table_tr_td_div">
                    <img src="<%= contsw[2][1] %>" alt="..." class="img-circle">
                    <div class="table_tr_td_div_div1"><%= contsw[3][1] %></div>
                    <div class="table_tr_td_div_div2"><%= contsw[4][1] %></div>
                </div>
                <div class="table_fonts">观看人数:<%= contsw[5][1] %></div>
                <div class="table_fonts2">转发人数:<%= contsw[6][1] %></div>
            </div>
        </td>
        <th>
            <div id="table_div2" class="container_table_div2">
                <img src="<%= contsw[1][1] %>" alt="..." class="img-rounded">
                <div class="table_tr_td_div">
                    <img src="<%= contsw[2][1] %>" alt="..." class="img-circle">
                    <div class="table_tr_td_div_div1"><%= contsw[3][1] %></div>
                    <div class="table_tr_td_div_div2"><%= contsw[4][1] %></div>
                </div>
                <div class="table_fonts">观看人数:<%= contsw[5][1] %></div>
                <div class="table_fonts2">转发人数:<%= contsw[6][1] %></div>
            </div>
        </th>
    </tr>
    <%}%>
</table>
<%}%>

这样的话 就可以不等后台,或者不等开发接口来进行你的页面开发了,菜鸟求大神罩
  
效果图如下



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值