bootstrap前端框架来实现一个精美的查看帖子评论的详情页面

版权声明:博客知识产权来源命运的信徒,切勿侵权 https://blog.csdn.net/qq_37591637/article/details/88826608

制作背景

1、apicloud做手机app前端,java服务器,ajax实现接口

2、前端采用bootstrap框架

3、后端采用ssh框架


效果图如下

html代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 面包屑导航</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
	<style>
		.table tr td {
		border:1px solid white;
		}
	</style>
<body>
<ul class="breadcrumb">
	<li><a href="#">共享农场论坛</a></li>
	<li><a href="#">水果</a></li>
	<li class="active">帖子详情页面</li>
</ul>
	  <div class="container">
    <div class="row text-center h3">极端天气 鸡苗行情</div>
		   <div class="row h5">
		  <span>俺是大壮</span>
				<span>回帖数23</span>
		  </div>
	   <div class="row h5">2018-03-23 07:53:00</div>
		     <div class="row h5">
		   &nbsp; &nbsp; &nbsp; &nbsp;蔬菜是大家餐桌上必不可少的食物,人们常说的一句话就是多吃蔬菜身体好,可想想吃了一辈子蔬菜

还从来不知道它们开花的样子!今天中国农产品网就带您看看它们开花的样子

看完您就晓得

原来这些蔬菜颜值这么高,还都是偶像派! 
		  </div>
		     <div class="row">图片</div>
   </div>
<!---评论区------>

<table class="table" >
  <caption>回帖区</caption>
    <tr>
      <td rowspan="3">头像</td>
      <td>用户名嘟嘟</td>
    </tr>
    <tr>
      <td>写的很随意呢?你觉得呢?</td>
    </tr>
	 <tr>
      <td>2018-03-26 18:02:00</td>
    </tr>
	
	<tr class="success">
		<td colspan="2">用户名我是大鹏回复嘟嘟</td>
	</tr>
	<tr>
      <td rowspan="3">头像</td>
      <td>用户名我是大鹏</td>
    </tr>
    <tr>
      <td>还行啊,别太苛刻</td>
    </tr>
	 <tr>
      <td>2018-03-26 18:04:00</td>
    </tr>
</table>
<!---写评论------>
<form role="form">
	<div class="form-group">
		<label for="name">写评论</label>
		<input type="text" class="form-control" placeholder="写下您的评论....">
	</div>
 </form>	
</body>
</html>

 


解析实现浏览某个帖子回复并且评论/回复的功能的思路

1、java后台会返回一个list集合形式的json对象,需要把这个json对象循环遍历在html页面上面

2、根据帖子的唯一标识postid,获取帖子的所有信息,把信息遍历在页面上

3、评论的时候,记录帖子的postid 评论人的用户名 时间  内容 存在另一张answer表中

4、回复的时候,就比评论多一行异色的提醒


详情代码,明天见

猜你喜欢

转载自blog.csdn.net/qq_37591637/article/details/88826608