bootstrap框架制作精美的发布帖子的页面+java做服务器实现功能

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

制作背景

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

2、前端采用bootstrap框架

3、后端采用ssh框架


页面效果图如下


前端代码如下

<!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>
<body>
	<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">发布帖子</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" role="form">
			<!---隐藏的用户名-->
			<div class="form-group">
		<div class="col-xs-12">
			<input type="text" class="form-control" id="username" 
				   placeholder="用户名">
		</div>
	</div>
	<!---隐藏的用户名-->
	<div class="form-group">
		<div class="col-xs-12">
			<input type="text" class="form-control" id="titlename" 
				   placeholder="请输入标题">
		</div>
	</div>
	<div class="form-group">
		<div class="col-xs-12">
			<textarea class="form-control" rows="3" placeholder="请输入内容" id="content"></textarea>
		</div>
	</div>
	<div class="form-group">
		<div class="col-xs-6">
		<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded" id="avatar"/>
		</div>
		<div class="col-xs-6" >
			<button type="button" class="btn btn-success" onclick="showAction();" style="margin-top:100px">上传图片</button>
		</div>
	</div>
	<div class="form-group">
		<div class="col-xs-10">
			<button type="submit" class="btn btn-primary">发布帖子</button>
		</div>
	</div>
</form>
    </div>
</div>
</body>
</html>

解析实现发布帖子功能的思路

1、这里的用户名是通过$api.getStorge('username')来实现的

2、图片的上传采用api.getPicture()来实现 通过ajax来把图片上传到后端

3、标题、内容以及用户名都是通过id,jquery的形式$("#id名称").html(value)获取值,传到ajax里面

4、通过http://192.168.1.104:8080/项目名/sendpost.action提交到后台

5、后台实现ModelDrivel<Post>接收参数,图片拷贝到服务器的一个文件夹里面,把图片路径存储到数据库里面


详情代码,明天见

猜你喜欢

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