ejs模式:
//写服务
app.get("/allstudent",function(req,res,next){
db.find("students",{},function(err,result){
//寻找完毕之后,result就是一个数组,说实话服务已经成功了
//但是,必须界面必须要可视化,所以要有模板引擎呈递
res.render("allstudent",{
"result" : result;
});
});
});
<% for(var i = 0 ; i < result.length ; i++) {%>
<div class="grid">
<p class="title"><%=result[i].name%></p>
<p class="xuehao"><%=result[i].xuehao%></p>
<p class="sex"><%=result[i].sex%></p>
</div>
<%}%>
Ajax模式:
//写服务
app.get("/allstudent",function(req,res,next){
db.find("students",{},function(err,result){
//如果不用模板引擎呈递,可以直接输出JSON,前台用Ajax或者Angular调用
var obj = {"result":result};
res.json(obj);
});
});
<script type="text/template" id="tem">
//这里是一个underscore模板
<div class="grid">
<p class="title">{{=name}}</p>
<p class="xuehao">{{=xuehao}}</p>
<p class="sex">{{=sex}}</p>
</div>
</script>
前端页面:
jQuery片段:
//得到模板html
var templateString = $("#tem").html();
//ajax请求
$.get("/allsutdent",function(result){
//这个result就是一个json对象
//要放到页面上,所以为了不字符串拼接,可以用模板引擎underscore
for(var i = 0 ; i < result.result.length ; i++){
//组装模板
var compiled = _.compiled(templateString,{
"name" : result.result[i].name;
"sex" : result.result[i].sex;
"xuehao" : result.result[i].xuehao;
});
//上DOM
$(".liebiao").append($(compiled));
}
});