从零学习node.js之利用express搭建简易论坛(七)

list_m.getIndexList(function(result){
res.render('index', { data:result }); // 选择index模板并传递数据
})
});

在views/index.ejs创建首页模板：

<h1>列表</h1>
<table>
 <tr>
 <td>标题</td>
 <td>作者</td>
 <td>创建时间</td>
 </tr>
 <% for(var i=0, len=data.length; i<len; i++) { %>
 <tr>
  <td><a href="/list/<%=data[i].id %>.html" rel="external nofollow" title="<%=data[i].title %>"><%=data[i].title %></a></td>
  <td><%=data[i].username %></td>
  <td><%=data[i].createtime %></td>
 </tr>
 <% } %>
</table>
<% if(user.username){ %>
<!-- 在登录状态展示输入框 -->
<div class="add">
 <p><input type="text" class="title"></p>
 <textarea class="content" cols="100" rows="10"></textarea>
 <p><input type="button" class="submit" value="提交"><span class="tip"></span></p>
</div>
<% }%>

展示数据完毕。

4.2 发表主题

我们在首页上添加了可以输入标题和内容的两个输入窗口，可以使用ajax的方式提交数据。

<script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
 var running = false;
 $('.submit').on('click', function(){
 if(running) return;
 running = true;
 $('.tip').text('');
 var title = $('.add .title').val();
  content = $('.add .content').val();
 if(!title || !content){
  $('.tip').text('*输入不能为空');
  return;
 }
 $('.tip').text('数据正在提交中...');
 $.ajax({
  url : '/list/addtopic', // 提交接口
  data : {title:title, content:content},
  dataType : 'json',
  type : 'get'
 }).done(function(result){
  if(result.code==0){
  var html = '<tr><td><a href="'+result.data.url+'" rel="external nofollow" title="'+result.data.title+'">'+result.data.title+'</a></td><td>'+result.data.author+'</td><td>'+result.data.createtime+'</td></tr>';
  $('table').append(html);
  $('.tip').text('');
  $('.title, .content').val('');
  }else{
  $('.tip').text('添加失败');
  }
  running = false;
 })
 })
</script>

这里的提交接口是/list/addtopic，因此我们需要再创建一个这样的路由：在routes目录下创建list.js：

// routes/list.js
router.get('/addtopic', function(req, res){
 // 在登录状态下可以添加主题								 
 7/9   首页 上一页 5 6 7 8 9 下一页 尾页