前后端交互项目总结

新建

前台jsp+javascript+html+css

后台 springMVC

后台

@RequestMapping(value = "/add_show", produces = "application/json;charset=UTF-8")
public ModelAndView add_show(Page page,String id) throws Exception {
ModelAndView mv = this.getModelAndView();
PageData pd = this.getPageData();
pd.put("id", id);
logBefore(logger, "保存save");
if (null!=id&&id!="") {
PageData pd_Path =service.findRow(pd);
mv.addObject("version", pd_Path);
}
mv.setViewName("mnt/message/Add_Version");
return mv;
}

前台

<!--新建 -->
<form action="appVersion/update_msg.do" method="post" name="addForm" id="addForm" onsubmit="return CheckPost();" enctype="multipart/form-data">
<input id ="id" type="hidden" name="id" value="${version.id }">
<div>
app的版本码<input type="text" name="version_code" value="${version.versioncode }" />
</div>
<div>
获取app名<input type="text" name="app_name" value="${version.appname }" />
</div>
<div>
app版本号<input type="text" name="version_number" value="${version.versionnum }"  />
</div>
<div>
请选择app类型
<select name="platform" id="platform">
<option value="android" <c:if test="${version.platform == 'android' }">selected="selected"</c:if>>平台Android</option>
<option value="ios" <c:if test="${version.platform != 'android' }">selected="selected"</c:if>>平台IOS</option>
</select>
</div>
<div>
是否强制更新
<select name="isforce" id="isforce">
<option value="1" <c:if test="${version.isforce == '1' }">selected="selected"</c:if>>是</option>
<option value="2" <c:if test="${version.isforce != '1' }">selected="selected"</c:if>>否</option>
</select>
</div>
<div>
apk的文件名<input type="text" size="10" name="apk_filename" maxlength="20" value="${version.apkname }"  />
</div>
<!-- <div>
文件所在的位置<input type="text" size="10" name="app_path"
maxlength="20" />
</div> -->
<div>
更新内容<input type="text"  name="content" value="${version.content }"  />
</div>
<div>
文件<input type="file" name="appFile"/>
</div>
<!--                        <div>内容:<textarea name="content" rows="8" cols="30"></textarea></div> -->

19901
<div>
<input autocomplete="off" id="nav-search-input1" type="button" value="提交" onclick="add_update();" />
</div>
</form>

function add_update(){
var id=$("#id").val();
if(id!=null&&""!=id){
$("#addForm").attr("action","appVersion/update_msg.do");//替换action属性
}else{
$("#addForm").attr("action","appVersion/save.do");
}
$("#addForm").submit();
}

利用ModelAndView方法跳转页面，通过接收参数id是否有值来判断（如果没有值代表新建，如果有值i，代表修改）是否有值，来进行判断跳转页面是否需要进行值的返回（新建不需要，修改则需要值），如果为修改，则需要根据前台选中记录的id，传给后台进行查询数据，将数据返回给前台，并在前台属性value上通过对象.属性名的方式进行调用。后台返回给前台结果的方式1.通过request.setattribute()的方法来向前台传值2.利用ModelAndView这个方法中的mv.addObject(“version”,pdPath);这种方式来进行返回。获取前台属性值是通过前台控件的name属性值来取得的。通过获取form的name属性值来进行重新跳转action（即跳向后台controller的方法）例如(“#addForm”).attr(“action”,”appVersion/update_msg.do”);//替换action跳转方法

之后就通过submit（）方法进行post方式提交，例如：$(“#addForm”).submit();

前台可通过c：if标签进行判断显示，如下拉列表框的显示选择处理

<div>
是否强制更新
<select name="isforce" id="isforce">
<option value="1" <c:if test="${version.isforce == '1' }">selected="selected"</c:if>>是</option>
<option value="2" <c:if test="${version.isforce != '1' }">selected="selected"</c:if>>否</option>
</select>
</div>

注意：前台jsp页面用==代表相等，！=代表不等于，没有equals方法

如果有新建文件时，或得项目所在路径使用

HttpSession session = req.getSession();
String strDirPath = session.getServletContext().getRealPath("/");

strDirPath 代表项目路径，这里的req是HttpServletRequest所属的变量

上传文件所需步骤：a.上面的取得所要上传的路径

b.创建目录，如果目录不存在，则创建

File dir = new File(strDirPath + "uploadFiles/app/" + platform + "/" + version_code);
if(!dir.exists()){
dir.mkdirs();
}

c.创建输入流，创建输出流，创建字节数组，定义一个int len=-1的变量

InputStream in = appFile.getInputStream();
FileOutputStream out = new FileOutputStream(strDirPath + app_path);
byte[] data = new byte[2048];
int len = -1;
while((len=in.read(data))!=-1){
out.write(data, 0, len);
}

解释：创建输入流将选中的类型文件读取到字节数组中，条件是读到等于-1为止，代表全部读取到字节数组中了，接着在while循环中利用输出流将字节数组的内容全部写到FileOutputStream out = new FileOutputStream(strDirPath + app_path);这个方法所在参数的目录中，之后就可以看见文件成功上传到指定目录了。

之后关闭输出流，输入流，顺序不能颠倒。

controller跳转指定的controller使用

return "redirect:/appVersion/fetchList.do";

这个方式

2.删除

具体逻辑：或得选中的记录行id；传入后台，调用数据库进行删除，

删除带有文件的需要麻烦一点，需要或得文件的路径进行删除

后台代码

@RequestMapping(value = "/delete", produces = "application/json;charset=UTF-8")
@ResponseBody
public Object delete(HttpServletRequest req) throws Exception {
Map<String, Object> map = new HashMap<String, Object>();

PageData pd = this.getPageData();
if (pd == null) {
map.put("code", "-1");
map.put("msg", "删除失败！");
return map;
}
HttpSession session = req.getSession();
String strDirPath = session.getServletContext().getRealPath("/");
PageData pd_Path =service.findPath(pd);
File file1=new File(strDirPath+pd_Path.getString("app_path"));
String path_a=pd_Path.getString("app_path");
path_a=path_a.substring(0, path_a.lastIndexOf("/"));
File file=new File(strDirPath+path_a);

if(file1.delete()){
file.delete();
service.delete(pd);
map.put("code", "0");
map.put("msg", "OK");
}else{
map.put("code", "0");
map.put("msg", "fail");
}

return map;
}

前台代码

//删除delete_apk
function delete_apk(){
var id=$("input[name='id']:checked").val();
if(id==null||id==""){
alert("请选中要删除的记录!")
}else{
if(confirm("是否删除?")){
$.ajax({
url :"appVersion/delete",
type : "post",
dataType : "json",
data : {
id:id
},
success : function(data){
console.info(data);
if(data.msg === "OK"){
alert("删除成功！！");
location.href='appVersion/fetchList.do';
}else{
alert("删除失败！！");
}
},
error : function(xhr) {
alert("删除失败！！");
}
});
}
}
}

<c:forEach items="${varList}" var="var" varStatus="vs">
<tr>
<td><input type="radio" name="id" value="${var.id}" style="opacity:1" /></td>
<td class='center' style="width: 30px;">${vs.index+1}</td>
<td>${var.versioncode}</td>
<td>${var.appname}</td>
<td>${var.versionnum}</td>
<td>${var.platform}</td>
<td>${var.apkname}</td>
<td>${var.apppath}</td>
<td>${var.update_time}</td>
<td>${var.create_time}</td>
</tr>

</c:forEach>

a.需要var id=$(“input[name=’id’]:checked”).val();这种方式获得name=”id”,并且是被选中的id，获取id的值，传入后台

b.通过confirm(“是否删除?”)方式弹出提示，来进行是否确认删除，之后，通过异步请求ajax的方式进行调用响应的controller进行删除操作，，后台通过where条件进行对id对应的记录进行删除

例如：

$.ajax({
url :"appVersion/delete",
type : "post",
dataType : "json",
data : {
id:id
},
success : function(data){
console.info(data);
if(data.msg === "OK"){
alert("删除成功！！");
location.href='appVersion/fetchList.do';
}else{
alert("删除失败！！");
}
},
error : function(xhr) {
alert("删除失败！！");
}
});

url:代表跳转的controller地址

data：是你要向后台传送的数据，这里我们删除传递一个参数id

删除文件，需要先进行查询文件所对应的路径，如果查的不是最后一层文件，则需要进行判断删除处理

例如：

HttpSession session = req.getSession();
String strDirPath = session.getServletContext().getRealPath("/");
PageData pd_Path =service.findPath(pd);
File file1=new File(strDirPath+pd_Path.getString("app_path"));
String path_a=pd_Path.getString("app_path");
path_a=path_a.substring(0, path_a.lastIndexOf("/"));
File file=new File(strDirPath+path_a);

if(file1.delete()){
file.delete();
service.delete(pd);
map.put("code", "0");
map.put("msg", "OK");
}else{
map.put("code", "0");
map.put("msg", "fail");
}

mybatis中注意一个技巧

<if test="null != pd.op_person and '' != pd.op_person and 'null' != pd.op_person"><!-- 创建人关键词检索 -->

and u.name LIKE CONCAT(CONCAT('%', #{pd.op_person}),'%')

</if>

这是if判断，true则进行拼接语句，concat方法表示将两个里面的参数进行拼接这样做就可以拼接成%属性值%的方式进行like模糊查询。

还有一个注意，前台查询时输入的数据进行保存处理操作

先将值获取到后台再将值传给前台，使用value属性进行调用

例如：

前台

<td><span class="input-icon"> <input
autocomplete="off" id="op_person" type="text"
name="op_person" value="${pd.op_person}"
placeholder="这里输入创建人关键词" />
</span></td>

后台

String op_person = pd.getString("op_person");

if (null != op_person && !"".equals(op_person)) {
op_person = op_person.trim();
pd.put("key_name", op_person);
}
mv.addObject("pd", pd);

这里使用modelAndview方式变量mv.addObject()方法返回给前台，前台调用即可。