前後端互動專案總結
阿新 • • 發佈：2018-12-22
- 新建
前臺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" 前臺
<!--新建 -->
<form 利用ModelAndView方法跳轉頁面，通過接收引數id是否有值來判斷（如果沒有值代表新建，如果有值i，代表修改）是否有值，來進行判斷跳轉頁面是否需要進行值的返回（新建不需要，修改則需要值），如果為修改，則需要根據前臺選中記錄的id，傳給後臺進行查詢資料，將資料返回給前臺，並在前臺屬性value上通過
之後就通過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';
}