版权声明:博客知识产权来源命运的信徒,切勿侵权 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>接收参数,图片拷贝到服务器的一个文件夹里面,把图片路径存储到数据库里面
详情代码,明天见